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/. Un script y tu lado de Django se encuentran en los nombres: los identificadores que 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 el JSON no tiene una clave, no se produce ningún error: JavaScript la lee como undefined e imprime esa palabra en la página. La ausencia de un identificador tampoco genera un error visible, solo 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 la página de inicio, el párrafo de resumen con el identificador que busca el script, encima de la etiqueta script.
En /api/stats/, la clave que lee el resumen para las tareas no completadas, junto a total y done.

Pulsa Ejecutar: 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>