📘 Chapitre 2 – Parcourir et afficher les données d’une API

1. 🎯 Objectif pédagogique

Apprendre à parcourir les données JSON reçues d’une API et à les afficher dynamiquement dans une page web.

2. 📚 Concepts abordés

Parcourir des tableaux d’objets JSON avec for ou forEach
Créer des éléments HTML avec document.createElement
Modifier le DOM pour insérer des données
Affichage dynamique d’une liste (ex. : articles, produits)

3. 🧠 Explication théorique

Lorsque fetch() retourne des données, il s’agit souvent d’un tableau d’objets. On peut les parcourir pour générer du contenu.

Exemple :

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(posts => {
    posts.forEach(post => {
      console.log(post.title);
    });
  });

Pour afficher ces données sur une page, on peut créer des éléments HTML :

let ul = document.createElement('ul');
posts.forEach(post => {
  let li = document.createElement('li');
  li.textContent = post.title;
  ul.appendChild(li);
});
document.body.appendChild(ul);

4. 🛠 Tutoriel pratique

Résumé

Nous allons afficher une liste de titres récupérés depuis une API publique directement dans la page web.

Arborescence du projet

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Afficher les données d’une API</title>
</head>
<body>
  <h1>Liste des articles</h1>
  <div id="articles"></div>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript

let container = document.getElementById("articles");

fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
  .then(response => response.json())
  .then(posts => {
    let ul = document.createElement('ul');

    posts.forEach(post => {
      let li = document.createElement('li');
      li.textContent = post.title;
      ul.appendChild(li);
    });

    container.appendChild(ul);
  })
  .catch(error => {
    container.innerText = "Erreur lors de la récupération des données.";
    console.error(error);
  });

Étape 3 : Test

Ouvre index.html et vérifie que la liste des titres s’affiche correctement.

5. 🧾 Résumé et points-clés

Les données JSON peuvent être parcourues avec forEach.
On peut générer du HTML dynamiquement à partir des données.
L’affichage dynamique permet de créer des listes ou des tableaux à partir de sources externes.