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

חלק מהיחידה ממשקי 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 החדש, ואז ספק לו את מה שהוא צריך:

בדף הבית, פסקת הסיכום עם המזהה שהסקריפט מחפש, מעל תגית הסקריפט.
ב־/api/stats/, המפתח שפסקת הסיכום קוראת עבור משימות שלא הושלמו, לצד total ו־done.

לחץ על 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>