Menu
CoddyTech

Klucze odczytywane przez skrypt

Część sekcji API JSON ścieżki Django w Coddy. Lekcja 13 z 19.

Nowy plik app.js dodaje podsumowanie nad listą, utworzone na podstawie /api/stats/. Skrypt i część Django spotykają się w nazwach: identyfikatorach, których szuka na stronie, oraz kluczach, które odczytuje z JSON.

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

stats.done odczytuje klucz "done" z JSON. Brak klucza w JSON nie powoduje błędu: JavaScript odczytuje go jako undefined i wyświetla to słowo na stronie. Brakujący identyfikator również powoduje cichy błąd, widoczny tylko w konsoli przeglądarki. Dlatego najpierw przeczytaj skrypt: jego nazwy wyznaczają twoje, co do litery.

challenge icon

Wyzwanie

Średni

Przeczytaj nowy plik app.js, a następnie dostarcz mu to, czego potrzebuje:

  • Na stronie głównej umieść akapit podsumowania z identyfikatorem, którego szuka skrypt, nad znacznikiem script.
  • W /api/stats/ dodaj klucz odczytywany przez podsumowanie dla zadań, które nie są ukończone, obok total i done.

Naciśnij Run: podsumowanie wyświetli 2 open, 1 done.

Spróbuj swoich sił

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

Wszystkie lekcje w sekcji API JSON

Poćwicz samodzielnie: Edytor online Django