Partie 5 : L’injection dans le DOM et l’affichage

Notre tableau UserData a été récupéré, vérifié, et transformé en une longue chaîne de caractères HTML. Il ne reste plus qu’à l’afficher sur la page !

/* ... fin de la fonction userDisplay ... */
    const appContainer = document.getElementById('app');

    appContainer.innerHTML = UserData.map(
        // ... création du HTML ...
    ).join("");
};

userDisplay();

1. Cibler l’élément dans le HTML

Avant de pouvoir écrire sur la page web depuis JavaScript, il faut dire à JavaScript où écrire. Nous avons préparé pour cela une balise <div id="app"></div> dans notre fichier index.html.

La ligne const appContainer = document.getElementById('app'); demande au navigateur : “Cherche-moi l’élément HTML dont l’ID exact est ‘app’, et garde une référence vers cet élément dans la constante appContainer”.

2. Remplacer le contenu avec .innerHTML

La propriété .innerHTML est l’une des plus utilisées en JavaScript :

• Elle permet de lire le contenu HTML qui se trouve à l’intérieur d’une balise.
• Surtout, elle permet d’écraser (remplacer) le contenu de cette balise par un nouveau contenu texte interprété comme du vrai HTML !

C’est exactement ce que nous faisons : appContainer.innerHTML = UserData.map(...).join(""); Nous prenons la grande chaîne de caractères HTML que nous avons fabriquée à l’étape précédente avec .map() et .join(), et nous la “versons” à l’intérieur de la <div id="app">.

Dès que cette ligne est exécutée par le navigateur, la page web clignote et vos 24 cartes d’utilisateurs apparaissent instantanément à l’écran, avec leurs belles photos et le design en grille que nous avons préparé en CSS !

3. L’exécution finale

Il ne faut pas oublier le dernier détail, mais le plus important de tout ce fichier !

userDisplay();

Tout notre code jusque-là ne faisait que définir des fonctions (fetchUser et userDisplay). Une fonction définie ne s’exécute jamais toute seule, elle attend qu’on l’appelle. La toute dernière ligne du fichier “appuie sur le bouton de démarrage” en appelant notre grande fonction principale. C’est le point de départ de tout le processus asynchrone que nous venons d’étudier.

---

Félicitations ! Vous avez compris toutes les étapes pour interroger une API distante, gérer les erreurs, manipuler un JSON et afficher des données dynamiquement en JavaScript !