Chiavi lette dallo script

Fa parte della sezione API JSON del percorso Django di Coddy. Lezione 13 di 19.

Il nuovo app.js aggiunge un riepilogo sopra l'elenco, creato a partire da /api/stats/. Lo script e il tuo codice Django devono concordare sui nomi: gli id che lo script cerca nella pagina e le chiavi che legge dal JSON.

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

stats.done legge la chiave "done" dal tuo JSON. Se nel JSON manca una chiave, non viene generato alcun errore: JavaScript la legge come undefined e stampa quella parola sulla pagina. Se manca un id, il problema passa altrettanto inosservato: viene mostrato un errore solo nella console del browser. Quindi leggi prima lo script: sono i suoi nomi a determinare i tuoi, lettera per lettera.

Sfida

Medio

Leggi il nuovo app.js, poi forniscigli ciò di cui ha bisogno.

In tasks/templates/tasks/home.html, aggiungi il paragrafo di riepilogo con l'id cercato dallo script, sopra il tag script.
Nella vista stats in tasks/views.py, aggiungi la chiave letta dal riepilogo (cercala dopo stats. in app.js). Il suo valore è il numero di attività non completate.

Premi «Esegui»: il riepilogo mostra 2 open, 1 done.

Provalo tu

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