Correction contact API flotte: id corps_flotte inexistant, deux versions qui se telescopent, brancher fetch sur afficherFlotte

CORRECTION_api_flotte.md

@@ -0,0 +1,72 @@
+# 🔧 Correction — l'API affiche « Impossible de charger la flotte 😕 »
+
+Tu y es presque ! Ton `fetch` fonctionne (le fichier est bien servi, statut 200), et tu as écrit du **très bon** code propre (`createLign`, `afficherFlotte`). Le souci, c'est qu'il y a **deux versions** dans ton `flotte.js` qui ne se parlent pas, et **un id qui ne correspond pas**. On démêle.
+
+---
+
+## 1. 🐛 Pourquoi le message d'erreur s'affiche
+
+Dans `chargerFlotte`, tu vises ce `tbody` :
+
+```js
+const corps = document.getElementById("corps_flotte");   // ❌ cet id n'existe pas
+```
+
+Mais dans ton HTML, ton tableau de flotte a pour id **`flotte_tableau`** (pas `corps_flotte`). Donc `corps` vaut **`null`**, et un peu plus bas `corps.append(tr)` plante (« on ne peut pas faire `.append` sur `null` »).
+
+Comme ce `.append` est dans ton `try`, l'erreur est **attrapée** par le `catch` → qui affiche « Impossible de charger la flotte 😕 ». 
+
+> 🔎 **Donc ton API n'est PAS en cause :** le fichier est bien chargé et transformé (`vehicules` contient tes 3 véhicules). C'est juste qu'au moment de les **afficher**, tu cherches un élément qui n'existe pas. Pour le voir toi-même : dans **F12 → Console**, tu verras l'erreur exacte (`Cannot read properties of null (append)`) loggée par ton `console.error(erreur)`.
+
+---
+
+## 2. 🧩 Le vrai souci : tu as écrit **deux fois** l'affichage
+
+Regarde ton `flotte.js`, tu as en réalité **deux mécanismes** :
+
+**Version A — le `fetch`** (les vraies données du fichier) :
+```js
+async function chargerFlotte() {
+  ... fetch ... 
+  for (const v of vehicules) { corps.append(tr); }   // vise corps_flotte (inexistant)
+}
+```
+
+**Version B — une copie écrite à la main** (`flotte1`) avec tes belles fonctions :
+```js
+const flotte1 = [ { modele: "Renault Kangoo", ... }, ... ];   // ← une COPIE en dur
+function createLign(car) { ... }
+function afficherFlotte(list) { ... }   // vise flotte_tableau (qui existe ✅)
+afficherFlotte(flotte1);
+```
+
+Résultat : ce que tu **vois** à l'écran, c'est la **version B** (la copie `flotte1`), pas les données venues du fichier. Et la version A échoue dans son coin. Le `fetch` ne sert donc à rien pour l'instant : tu affiches une copie, pas le vrai fichier.
+
+> 💡 Le but de l'exercice `fetch`, c'est justement de **ne plus** écrire les données en dur (`flotte1`) mais de les **charger depuis `vehicules.json`**. Sinon, autant tout écrire dans le HTML.
+
+---
+
+## 3. ✅ La solution : **brancher** ton fetch sur tes belles fonctions
+
+Tu as déjà tout : `createLign` et `afficherFlotte` sont parfaites et visent le **bon** tableau (`flotte_tableau`). Il suffit que `chargerFlotte` **leur passe** les données qu'il a récupérées, au lieu de réécrire une boucle dans son coin.
+
+L'idée (à toi de l'assembler) :
+1. Dans `chargerFlotte`, après `const vehicules = await reponse.json();`, **appelle `afficherFlotte(vehicules);`** → tes vraies données passent dans ta fonction d'affichage, qui vise le bon `tbody`.
+2. **Supprime** la boucle `for (const v of vehicules) { ... corps.append ... }` de `chargerFlotte` (c'est `afficherFlotte` qui fait ce travail maintenant) — et donc la variable `corps` au mauvais id disparaît avec.
+3. **Supprime `flotte1`** et le `afficherFlotte(flotte1)` final : tu n'as plus besoin de la copie en dur, c'est le fichier qui fournit les données.
+4. Tu peux garder le `message.textContent = vehicules.length + " véhicules :"` pour le petit compteur.
+
+> 🔎 En clair : `chargerFlotte` **récupère** les données, `afficherFlotte` **les affiche**. Chacun son rôle, et ils se passent le relais avec `afficherFlotte(vehicules)`. C'est exactement le même duo que sur ton tableau d'équipe (`afficherEquipe(liste)`).
+
+**✅ Test :** le message « Impossible de charger » disparaît, et le tableau affiche les véhicules **venus de `vehicules.json`**. Pour le prouver : ajoute un 4ᵉ véhicule **dans le fichier `vehicules.json`** (pas dans le JS), recharge → la 4ᵉ ligne apparaît. Si oui, c'est gagné : tu affiches bien le fichier, plus une copie. 🎉
+
+---
+
+## ✅ Récap
+
+- [ ] Comprendre : l'erreur venait de l'**id** `corps_flotte` (inexistant), pas de l'API
+- [ ] Faire `chargerFlotte` → `afficherFlotte(vehicules)` (brancher le fetch sur ta fonction d'affichage)
+- [ ] Supprimer la copie en dur `flotte1` et la boucle en double
+- [ ] Vérifier en ajoutant une ligne **dans le JSON**
+
+Honnêtement tu avais déjà écrit 90 % du bon code — il ne manquait que de **relier les deux morceaux**. C'est tout l'enjeu quand un fichier grossit : éviter d'avoir deux fois la même chose qui se marche dessus.