Vom Skript gelesene Schlüssel

Teil des Abschnitts JSON-APIs der Django-Journey von Coddy. Lektion 13 von 19.

Die neue app.js fügt oberhalb der Liste eine Zusammenfassung hinzu, die auf /api/stats/ basiert. Ein Skript und deine Django-Seite treffen sich in den Namen: den IDs, nach denen es auf der Seite sucht, und den Schlüsseln, die es aus dem JSON liest.

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

stats.done liest den Schlüssel "done" aus deinem JSON. Fehlt ein Schlüssel im JSON, wird kein Fehler ausgelöst: JavaScript liest ihn als undefined und gibt dieses Wort auf der Seite aus. Eine fehlende ID schlägt ebenso unauffällig fehl; ein Fehler erscheint nur in der Browserkonsole. Lies also zuerst das Skript: Seine Namen bestimmen deine, Buchstabe für Buchstabe.

Aufgabe

Mittel

Lies die neue app.js und gib ihr dann, was sie braucht:

Auf der Startseite den Zusammenfassungsabsatz mit der ID, nach der das Skript sucht, oberhalb des Script-Tags.
Unter /api/stats/ den Schlüssel, den die Zusammenfassung für nicht erledigte Aufgaben ausliest, neben total und done.

Klicke auf „Run“: Die Zusammenfassung zeigt 2 open, 1 done an.

Probier es selbst

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