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 a partir de /api/stats/. Um script e o lado Django se encontram nos nomes: os ids que ele procura na página e as chaves que 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. A ausência de uma chave 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 falha de forma igualmente silenciosa, gerando um erro apenas no console do navegador. Então, 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:

Na página inicial, o parágrafo de resumo com o id que o script procura, acima da tag de script.
Em /api/stats/, a chave que o resumo lê para as tarefas não concluídas, ao lado de total e done.

Pressione Run: o resumo exibe 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>