Une page qui appelle l’API

Fait partie de la section API JSON du Journey Django de Coddy. Leçon 12 sur 19.

Votre API a un client à l’intérieur du site : le JavaScript de la page d’accueil. La page se charge une fois, puis son script demande des données à l’API et remplit la page sans la recharger. Le script, tasks/static/tasks/app.js, est fourni ; votre tâche consiste à créer la page dont il a besoin.

fetch("/api/tasks/") envoie une requête GET depuis le navigateur du visiteur, et response.json() lit la réponse. document.getElementById("task-list") trouve l’élément dont l’id est task-list : la page doit donc en contenir un. Un script s’exécute dès que le navigateur lit sa balise ; celle-ci doit donc se trouver après les éléments qu’il utilise, à la fin du corps de la page. Chargez-le comme vous chargez une feuille de style :

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

Les tests ne peuvent pas exécuter JavaScript ; ils vérifient donc la page et le JSON. L’aperçu, lui, exécute réellement le script.

Défi

Moyen

Lisez tasks/static/tasks/app.js, puis dans tasks/templates/tasks/home.html :

Ajoutez la liste que le script remplit, avec l’identifiant qu’il recherche.
Chargez tasks/app.js à l’aide de {% static %}, en le plaçant de sorte que la liste existe lorsqu’il s’exécute.

Cliquez sur Run : les trois tâches apparaissent sur la page d’accueil.

Essayez vous-même

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