Afficher les produits

🎯 Objectif

Récupérer les produits depuis l'API DummyJSON et les afficher dans le tableau.

📖 Contexte

Maintenant que la structure HTML est prête, on va la remplir avec de vraies données !

L'API DummyJSON

DummyJSON est une API gratuite qui fournit des données de test. On va utiliser l'endpoint des produits :

https://dummyjson.com/products?limit=10&select=title,price,category,thumbnail

Cette URL retourne un objet JSON avec une propriété products contenant un tableau de 10 produits.

Afficher des données dans un tableau

Pour remplir un tableau HTML dynamiquement :

// 1. Récupérer le tbody
const tbody = document.querySelector("#mon-tbody")

// 2. Construire le HTML avec forEach
let html = ""
donnees.forEach(function(item) {
  html += "<tr>"
  html += "<td>" + item.nom + "</td>"
  html += "<td>" + item.prix + " $</td>"
  html += "</tr>"
})

// 3. Injecter dans le DOM
tbody.innerHTML = html

Gestion d'erreur

Le try/catch est déjà en place pour gérer les erreurs réseau. Si le fetch échoue, un message d'erreur s'affiche.

📝 Consigne

Complète la fonction chargerProduits() :

1. Remplace le premier null par un appel fetch() avec l'URL DummyJSON
2. Remplace le deuxième null par await response.json()

Puis complète afficherProduits() :

3. Dans le forEach, génère une ligne <tr> pour chaque produit avec ses colonnes