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

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を読み、次に必要なものを用意してください。

ホームページに、スクリプトが参照するIDを持つ概要段落を、scriptタグの上に追加します。
/api/stats/に、未完了のタスクについて概要が読み取るキーを、totalとdoneの隣に追加します。

Runを押すと、概要に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>