Claves que lee el script

Parte de la sección API JSON del Journey de Django de Coddy. Lección 13 de 19.

El nuevo app.js añade un resumen encima de la lista, creado a partir de /api/stats/. El script y tu código de Django tienen que coincidir en los nombres: los id que el script busca en la página y las claves que lee del JSON.

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

stats.done lee la clave "done" de tu JSON. Si falta una clave en el JSON, no se produce ningún error: JavaScript la lee como undefined e imprime esa palabra en la página. Si falta un id, el fallo también pasa desapercibido y solo aparece un error en la consola del navegador. Así que lee primero el script: sus nombres determinan los tuyos, letra por letra.

Desafío

Intermedio

Lee el nuevo app.js y después dale lo que necesita.

En tasks/templates/tasks/home.html, agrega el párrafo de resumen con el id que busca el script, encima de la etiqueta script.
En la vista stats de tasks/views.py, agrega la clave que lee el resumen (búscala después de stats. en app.js). Su valor es el número de tareas no completadas.

Presiona «Run»: el resumen muestra 2 open, 1 done.

Pruébalo tú mismo

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