📘 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 et map sont idéales pour générer du contenu dynamique.
  • Les template strings simplifient la création d’éléments HTML complexes.