📘 Chapitre 4 – Rendu dynamique depuis des tableaux d’objets
1. 🎯 Objectif pédagogique
Apprendre à générer automatiquement du contenu HTML en parcourant un tableau d’objets et en construisant dynamiquement les éléments du DOM.
2. 📚 Concepts abordés
- Manipuler un tableau d’objets (
forEach
,map
) - Générer du HTML dynamique (listes, cartes produits)
- Combiner template strings (littéraux de gabarits) et données
- Gestion des informations complexes (nom, prix, image)
3. 🧠 Explication théorique
Le rendu dynamique permet de transformer des données JavaScript en contenu affiché sur la page.
Exemple de tableau d’objets :
let produits = [
{ nom: "PC portable", prix: 900 },
{ nom: "Clavier", prix: 40 }
];
On peut générer des éléments HTML directement :
let container = document.getElementById("produits");
produits.forEach(p => {
let li = document.createElement("li");
li.textContent = `${p.nom} – ${p.prix} €`;
container.appendChild(li);
});
Avec un template string :
let html = produits.map(p => `<li>${p.nom} – ${p.prix} €</li>`).join("");
container.innerHTML = html;
4. 🛠 Tutoriel pratique
Résumé
Nous allons afficher une liste de produits sous forme de cartes (nom, prix, image) générées dynamiquement.
Arborescence du projet
mon_projet/
├── index.html
└── script.js
Étape 1 : Fichier HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Rendu dynamique</title>
<style>
.carte { border: 1px solid #ccc; padding: 10px; margin: 10px; display: inline-block; }
.carte img { max-width: 100px; display: block; margin-bottom: 5px; }
</style>
</head>
<body>
<h1>Catalogue de produits</h1>
<div id="catalogue"></div>
<script src="script.js"></script>
</body>
</html>
Étape 2 : Code JavaScript
let produits = [
{ nom: "PC portable", prix: 900, image: "pc.png" },
{ nom: "Clavier mécanique", prix: 45, image: "clavier.png" },
{ nom: "Souris sans fil", prix: 25, image: "souris.png" }
];
let catalogue = document.getElementById("catalogue");
produits.forEach(p => {
let carte = document.createElement("div");
carte.className = "carte";
carte.innerHTML = `
<img src="${p.image}" alt="${p.nom}">
<h3>${p.nom}</h3>
<p>Prix : ${p.prix} €</p>
`;
catalogue.appendChild(carte);
});
Étape 3 : Test
Place des images fictives (ou modifie les noms de fichiers) et ouvre index.html
pour voir le catalogue.
5. 🧾 Résumé et points-clés
- Les tableaux d’objets permettent de stocker des ensembles de données structurées.
- Les méthodes
forEach
etmap
sont idéales pour générer du contenu dynamique. - Les template strings simplifient la création d’éléments HTML complexes.