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

جزء من قسم واجهات 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>