Klucze odczytywane przez skrypt

Część sekcji API JSON ścieżki Django w Coddy. Lekcja 13 z 19.

Nowy plik app.js dodaje podsumowanie nad listą, utworzone na podstawie /api/stats/. Skrypt i Twój kod Django muszą używać tych samych nazw: identyfikatorów, których skrypt szuka na stronie, oraz kluczy, które odczytuje z JSON-a.

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

stats.done odczytuje z Twojego JSON-a wartość klucza "done". Brakujący klucz w JSON-ie nie powoduje błędu: JavaScript odczytuje go jako undefined i wyświetla to słowo na stronie. Brakujący identyfikator również powoduje cichy błąd, który pojawia się tylko w konsoli przeglądarki. Dlatego najpierw przeczytaj skrypt: to jego nazwy określają nazwy, których masz użyć, co do litery.

Wyzwanie

Średni

Przeczytaj nowy plik app.js, a następnie zapewnij mu to, czego potrzebuje.

W pliku tasks/templates/tasks/home.html dodaj akapit z podsumowaniem i identyfikatorem, którego szuka skrypt, nad znacznikiem script.
W widoku stats w pliku tasks/views.py dodaj klucz, którego używa podsumowanie (znajdź go po stats. w pliku app.js). Jego wartością jest liczba niewykonanych zadań.

Naciśnij „Uruchom”: podsumowanie wyświetla 2 open, 1 done.

Spróbuj swoich sił

{% 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>