📘 Chapitre 7 – Manipuler des objets imbriqués & tableaux

1. 🎯 Objectif pédagogique

Savoir parcourir et modifier des objets complexes (objets imbriqués, tableaux d’objets), accéder aux propriétés profondes et mettre à jour des données dynamiques.

2. 📚 Concepts abordés

  • Accéder aux propriétés d’objets (obj.propriete ou obj['propriete'])
  • Parcourir des tableaux d’objets avec forEach, map
  • Manipuler des objets imbriqués (exemple : obj.adresse.ville)
  • Ajouter, modifier et supprimer des éléments dans un tableau (push, splice)
  • Utiliser Object.keys() et Object.values()

3. 🧠 Explication théorique

Un objet peut contenir d’autres objets ou tableaux :

let utilisateur = {
  nom: "Ali",
  adresse: {
    ville: "Tanger",
    codePostal: 90000
  },
  achats: ["PC", "Clavier", "Souris"]
};

console.log(utilisateur.adresse.ville); // Tanger

Pour parcourir un tableau d’objets :

let produits = [
  { nom: "PC", prix: 900 },
  { nom: "Souris", prix: 25 }
];

produits.forEach(p => console.log(`${p.nom} - ${p.prix} €`));

Pour modifier un élément :

produits[0].prix = 850; // Mise à jour du prix du PC

4. 🛠 Tutoriel pratique

Résumé

Nous allons afficher la liste des produits d’un utilisateur avec leur prix et mettre à jour un produit.

Arborescence du projet 

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

Étape 1 : Fichier HTML 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Objets imbriqués et tableaux</title>
</head>
<body>
  <h1>Produits achetés</h1>
  <ul id="liste-produits"></ul>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript 

let utilisateur = {
  nom: "Sara",
  adresse: {
    ville: "Rabat",
    codePostal: 10000
  },
  achats: [
    { nom: "PC portable", prix: 900 },
    { nom: "Souris", prix: 20 },
    { nom: "Clavier", prix: 40 }
  ]
};

let liste = document.getElementById("liste-produits");

// Parcourir les achats
utilisateur.achats.forEach(item => {
  let li = document.createElement("li");
  li.textContent = `${item.nom} - ${item.prix} €`;
  liste.appendChild(li);
});

// Mise à jour d'un prix
utilisateur.achats[0].prix = 850;
console.log("Nouveau prix du PC :", utilisateur.achats[0].prix);

Étape 3 : Test

Ouvre la page et observe la liste affichée. Regarde la console pour voir la mise à jour du prix.

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

  • Les objets imbriqués se manipulent avec la notation en chaînant les propriétés (obj.sousObjet.propriete).
  • Les tableaux d’objets se parcourent avec forEach, map, etc.
  • On peut modifier, ajouter ou supprimer des données directement dans la structure.