Chaves que o script lê

Parte da seção APIs JSON do Journey de Django da Coddy. Lição 13 de 19.

O novo app.js adiciona um resumo acima da lista, criado com base em /api/stats/. O script e o seu código Django precisam concordar quanto aos nomes: os ids que o script procura na página e as chaves que ele lê do JSON.

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

stats.done lê a chave "done" do seu JSON. Uma chave ausente no JSON não gera erro: o JavaScript a lê como undefined e exibe essa palavra na página. A ausência de um id também falha silenciosamente, com um erro apenas no console do navegador. Portanto, leia o script primeiro: os nomes dele determinam os seus, letra por letra.

Desafio

Médio

Leia o novo app.js e, em seguida, forneça o que ele precisa.

Em tasks/templates/tasks/home.html, adicione o parágrafo de resumo com o id que o script procura, acima da tag de script.
Na view stats em tasks/views.py, adicione a chave que o resumo lê (encontre-a depois de stats. em app.js). O valor dela é o número de tarefas não concluídas.

Pressione Executar: o resumo mostra 2 open, 1 done.

Experimente você mesmo

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