Les clés lues par le script

Fait partie de la section API JSON du Journey Django de Coddy. Leçon 13 sur 19.

Le nouveau app.js ajoute un résumé au-dessus de la liste, généré à partir de /api/stats/. Un script et votre côté Django se rejoignent par leurs noms : les identifiants qu’il recherche sur la page et les clés qu’il lit dans le JSON.

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

stats.done lit la clé "done" dans votre JSON. L’absence d’une clé dans le JSON ne provoque pas d’erreur : JavaScript la lit comme undefined et affiche ce mot sur la page. L’absence d’un identifiant passe tout aussi discrètement, avec une erreur uniquement dans la console du navigateur. Lisez donc d’abord le script : ses noms déterminent les vôtres, à la lettre près.

Défi

Moyen

Lisez le nouveau app.js, puis donnez-lui ce dont il a besoin :

Sur la page d’accueil, le paragraphe de résumé avec l’id recherché par le script, au-dessus de la balise script.
Dans /api/stats/, la clé utilisée par le résumé pour lire le nombre de tâches non terminées, à côté de total et de done.

Appuyez sur Run : le résumé affiche 2 open, 1 done.

Essayez vous-même

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