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 aus /api/stats/ erstellt wird. Das Skript und dein Django-Code müssen bei den Namen übereinstimmen: bei den IDs, die das Skript auf der Seite sucht, und den Schlüsseln, die es aus dem JSON ausliest.

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

stats.done liest den Schlüssel "done" aus deinem JSON aus. Fehlt ein Schlüssel im JSON, wird kein Fehler ausgelöst: JavaScript liest ihn als undefined aus und zeigt dieses Wort auf der Seite an. Eine fehlende ID schlägt genauso unauffällig fehl, mit einer Fehlermeldung nur in der Konsole des Browsers. Lies also zuerst das Skript: Seine Namen geben deine vor, Buchstabe für Buchstabe.

Aufgabe

Mittel

Lies die neue app.js und gib ihr dann, was sie benötigt.

Füge in tasks/templates/tasks/home.html oberhalb des Script-Tags den Zusammenfassungsabsatz mit der ID hinzu, nach der das Skript sucht.
Füge in der stats-Ansicht in tasks/views.py den Schlüssel hinzu, den die Zusammenfassung ausliest (finde ihn nach stats. in app.js). Sein Wert ist die Anzahl der nicht erledigten Aufgaben.

Drücke auf „Ausführen“: Die Zusammenfassung lautet 2 open, 1 done.

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>