Partie 4 : Manipulation de données avec .map()

Une fois nos données récupérées, nous devons les préparer pour l’affichage. C’est le rôle de notre deuxième fonction : userDisplay().

const userDisplay = async () => {
    await fetchUser(); // On attend que la récupération soit terminée

    // Si les données n'ont pas été chargées, on arrête là
    if (!UserData || UserData.length === 0) return;

    // ... la suite : formatage des dates
};

1. La garde if (Early return)

Avant de commencer à manipuler nos données, il faut être sûr qu’on les a bien reçues ! C’est ce que fait la ligne if (!UserData || UserData.length === 0) return;. Si UserData est vide (à cause d’une erreur réseau traitée dans le chapitre précédent par exemple), on arrête purement et simplement la fonction avec le mot-clé return. Cela évite à JavaScript de planter en essayant de parcourir un tableau vide.

2. Le puissant Array.map()

L’outil le plus puissant pour transformer des tableaux en JavaScript est .map(). Dans notre code, UserData contient une liste d’utilisateurs. Nous voulons transformer cette liste de données “invisibles” en une liste de code HTML.

appContainer.innerHTML = UserData.map(
    (user) =>
        ` 
    <div class="card">
        <img src="${user.image}" alt="Photo de ${user.lastName}" />
        <h4>${user.firstName} ${user.lastName}</h4> 
        <!-- ... -->
    </div>
    `,
).join('');

1. La boucle : map() prend chaque élément du tableau UserData l’un après l’autre.
2. La variable user : Ce nom (que nous avons choisi) représente l’utilisateur en cours de traitement.
3. La transformation : Pour chaque utilisateur, map() va renvoyer le bloc de texte HTML (entre les backticks `). On appelle cela un Template Literal, qui permet d’injecter des variables dynamiques facilement avec la syntaxe ${maVariable}.
4. Le résultat : map() crée un nouveau tableau, mais cette fois-ci rempli de 24 gros morceaux de texte HTML prêt à l’emploi !

3. Le .join("") final

La méthode .map() retourne un tableau JavaScript (ex: ["<div...", "<div..."]). Le navigateur ne comprend pas les tableaux pour afficher du HTML, il a besoin d’une seule et unique chaîne de caractères (du texte).

C’est là que .join("") intervient : il prend tous les éléments de notre tableau de blocs HTML et les colle bout à bout sans aucun séparateur (grâce aux guillemets vides "").

Dans le 5ème et dernier chapitre, nous verrons comment injecter concrètement tout ce HTML généré dans notre page !