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, construit à partir de /api/stats/. Le script et votre code Django doivent s'accorder sur les noms : les identifiants que le script 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 aucune erreur : JavaScript la lit comme undefined et affiche ce mot sur la page. L'absence d'un identifiant échoue tout aussi silencieusement, avec une erreur uniquement dans la console du navigateur. Alors, lisez d'abord le script : ses noms déterminent les vôtres, lettre par lettre.

Défi

Moyen

Lis le nouveau fichier app.js, puis donne-lui ce dont il a besoin.

Dans tasks/templates/tasks/home.html, ajoute le paragraphe récapitulatif avec l’identifiant recherché par le script, au-dessus de la balise de script.
Dans la vue stats de tasks/views.py, ajoute la clé lue par le récapitulatif (repère-la après stats. dans app.js). Sa valeur correspond au nombre de tâches non terminées.

Clique sur « Jouer » : le récapitulatif 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>