スクリプトが読み込むキー

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 に、スクリプトが参照する id を持つ概要の段落を、script タグの上に追加します。
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>