Kunci yang Dibaca Skrip

Termasuk bagian API JSON dalam perjalanan Django di Coddy. Pelajaran 13 dari 19.

app.js yang baru menambahkan ringkasan di atas daftar, yang dibuat dari /api/stats/. Skrip dan kode Django-mu harus sepakat tentang nama: id yang dicari skrip di halaman, dan kunci yang dibacanya dari JSON.

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

stats.done membaca kunci "done" dari JSON-mu. Kunci yang tidak ada di JSON tidak menimbulkan error: JavaScript membacanya sebagai undefined dan menampilkan kata itu di halaman. Id yang tidak ada juga gagal tanpa banyak tanda, dengan error yang hanya muncul di konsol browser. Jadi, baca skripnya terlebih dahulu: nama-nama di dalamnya menentukan namamu, huruf demi huruf.

Tantangan

Sedang

Baca app.js yang baru, lalu berikan yang dibutuhkannya.

Di tasks/templates/tasks/home.html, tambahkan paragraf ringkasan dengan id yang dicari skrip, di atas tag skrip.
Di view stats dalam tasks/views.py, tambahkan kunci yang dibaca ringkasan (cari setelah stats. di app.js). Nilainya adalah jumlah tugas yang belum selesai.

Tekan tombol “Jalankan”: ringkasan menampilkan 2 open, 1 done.

Coba sendiri

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