Betik Tarafından Okunan Anahtarlar

Coddy'nin Django Journey'sinin JSON API'leri bölümünün bir parçası. Ders 13 / 19.

Yeni app.js, /api/stats/ üzerinden oluşturulan bir özeti listenin üstüne ekler. Betik ile Django kodun adlar konusunda uyuşmalı: betiğin sayfada aradığı id’ler ve JSON’dan okuduğu anahtarlar.

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

stats.done, JSON’ından "done" anahtarını okur. JSON’da olmayan bir anahtar hata vermez: JavaScript bunu undefined olarak okur ve bu sözcüğü sayfada gösterir. Eksik bir id de sessizce başarısız olur; hata yalnızca tarayıcının konsolunda görünür. Bu yüzden önce betiği oku: adların seninkileri harf harf belirler.

Görev

Orta

Yeni app.js dosyasını oku, ardından ihtiyaç duyduğu şeyi ona sağla.

tasks/templates/tasks/home.html dosyasına, komut dosyasının aradığı kimliğe sahip özet paragrafını script etiketinin üstüne ekle.
tasks/views.py dosyasındaki stats görünümüne, özetin okuduğu anahtarı ekle (app.js dosyasında stats. ifadesinden sonra geleni bul). Değeri, tamamlanmamış görevlerin sayısıdır.

“Run” düğmesine bas: özette 2 open, 1 done yazar.

Kendin dene

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