Các khóa mà script đọc

Thuộc phần API JSON trong hành trình Django của Coddy. Bài học 13 trên 19.

app.js mới thêm phần tóm tắt phía trên danh sách, lấy dữ liệu từ /api/stats/. Script và code Django của bạn phải thống nhất về tên: các id mà script tìm trên trang và các khóa mà script đọc từ JSON.

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

stats.done đọc khóa "done" từ JSON của bạn. Nếu JSON thiếu khóa này, sẽ không có lỗi nào xảy ra: JavaScript đọc giá trị đó thành undefined và in từ đó lên trang. Id bị thiếu cũng không gây lỗi rõ ràng, chỉ có thông báo lỗi trong bảng điều khiển của trình duyệt. Vì vậy, hãy đọc script trước: tên trong đó quyết định tên bạn dùng, phải khớp từng chữ cái.

Thử thách

Trung bình

Đọc app.js mới, rồi cung cấp cho nó những gì nó cần.

Trong tasks/templates/tasks/home.html, thêm đoạn văn tóm tắt với id mà script tra cứu, phía trên thẻ script.
Trong view stats ở tasks/views.py, thêm khóa mà phần tóm tắt đọc (tìm khóa đó sau stats. trong app.js). Giá trị của khóa là số tác vụ chưa hoàn thành.

Nhấn Chạy: phần tóm tắt hiển thị 2 open, 1 done.

Tự làm thử

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