脚本读取的密钥

本课属于 Coddy Django 学习旅程的“JSON API”单元。第 13 课，共 19 课。

新的 app.js 会根据 /api/stats/ 在列表上方添加摘要。脚本和你的 Django 代码必须使用一致的名称：脚本在页面上查找的 id，以及它从 JSON 中读取的键。

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

stats.done 会从你的 JSON 中读取键 "done"。如果 JSON 中缺少某个键，不会报错：JavaScript 会将其读取为 undefined，并在页面上显示这个词。缺少 id 时也不会明显报错，只有浏览器的控制台会显示错误。所以先阅读脚本：它使用的名称决定了你要用的名称，必须逐字母一致。

挑战

中等

阅读新的 app.js，然后满足它的需求。

在 tasks/templates/tasks/home.html 中，在 script 标签上方添加摘要段落，并设置脚本要查找的 id。
在 tasks/views.py 的 stats 视图中，添加摘要读取的键（在 app.js 中找到 stats. 后面的内容）。它的值是未完成任务的数量。

按下“运行”：摘要会显示 2 open, 1 done。

亲手试试

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