מפתחות שהסקריפט קורא

חלק מהיחידה ממשקי API של JSON במסלול ה-Django של Coddy. שיעור 13 מתוך 19.

הקובץ החדש app.js מוסיף סיכום מעל הרשימה, שנבנה מתוך /api/stats/. הסקריפט וקוד ה-Django שלך צריכים להסכים על השמות: המזהים שהסקריפט מחפש בדף והמפתחות שהוא קורא מה-JSON.

const stats = await response.json();
summary.textContent = stats.open + " open, " + stats.done + " done";

stats.done קורא את המפתח "done" מה-JSON שלך. מפתח שחסר ב-JSON לא גורם לשגיאה: JavaScript קורא אותו בתור undefined ומציג את המילה הזאת בדף. מזהה חסר נכשל בשקט באותה מידה, עם שגיאה רק במסוף של הדפדפן. לכן כדאי לקרוא קודם את הסקריפט: השמות שבו קובעים את השמות שלך, אות באות.

אתגר

בינוני

קראו את app.js החדש, ואז ספקו לו את מה שהוא צריך.

ב-tasks/templates/tasks/home.html, הוסיפו את פסקת הסיכום עם המזהה שהסקריפט מחפש, מעל תגית הסקריפט.
בתצוגת stats שב-tasks/views.py, הוסיפו את המפתח שהסיכום קורא (מצאו אותו אחרי stats. ב-app.js). הערך שלו הוא מספר המשימות שלא הושלמו.

לחצו על Run: הסיכום מציג 2 open, 1 done.

נסו בעצמכם

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
    <ul id="task-list"></ul>
    <script src="{% static 'tasks/app.js' %}"></script>
</body>
</html>