Страница, вызывающая API

Часть раздела JSON API путешествия по Django на Coddy. Урок 12 из 19.

У вашего API есть вызывающий код на сайте: JavaScript на главной странице. Страница загружается один раз, затем скрипт запрашивает у API данные и заполняет страницу без перезагрузки. Скрипт tasks/static/tasks/app.js уже предоставлен; ваша задача — подготовить страницу, которая ему нужна.

fetch("/api/tasks/") отправляет GET-запрос из браузера посетителя, а response.json() считывает ответ. document.getElementById("task-list") находит элемент с id task-list, поэтому на странице должен быть такой элемент. Скрипт запускается, как только браузер считывает его тег, поэтому разместите тег после элементов, которые он использует, в конце body. Подключите его так же, как подключаете таблицу стилей:

{% load static %}
<link rel="stylesheet" href="{% static 'shop/style.css' %}">

Проверки не могут запускать JavaScript, поэтому они проверяют страницу и JSON; в предварительном просмотре скрипт запускается по-настоящему.

Задание

Средне

Прочитай tasks/static/tasks/app.js, затем в tasks/templates/tasks/home.html:

Добавь список, который заполняет скрипт, с идентификатором, который он ищет.
Подключи tasks/app.js через {% static %} так, чтобы список уже существовал к моменту запуска скрипта.

Нажми Run: на главной странице появятся три задачи.

Попробуйте сами

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
</body>
</html>