المفاتيح التي يقرأها البرنامج النصي

جزء من قسم واجهات 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). قيمته هي عدد المهام غير المنجزة.

اضغط على «تشغيل»: سيعرض الملخّص 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>