Préparation au DS : lecture obligatoire

👩🏼‍🎓 Ce qu'il faut comprendre en priorité

Générer une liste HTML à partir d’un tableau JavaScript

Le tableau :

const fruits = ["Pomme", "Poire", "Banane"];

Le résultat HTML :

<ul>

    <li>Pomme</li>

    <li>Poire</li>

    <li>Banane</li>

</ul>

👩🏼‍🎓L’idée essentielle : 

On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.

const listHTML = `
  <ul>
    ${fruits.map(fruit => `<li>${fruit}</li>`).join("")}
  </ul>
`;

Explications :

1. La structure HTML fixe : les balises <ul> et </ul> sont écrites directement, car nous savons que nous voulons créer une liste.

2. L’insertion dynamique : ${...} permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.

3. La génération des éléments : fruits.map(fruit => ...) parcourt le tableau et génère un élément <li> pour chaque fruit.

4. La réunion des éléments : .join("") rassemble les différentes chaînes HTML en une seule, sans séparateur.

👩🏼‍🎓À retenir : 

• les backticks ` ` délimitent le template literal, 
• le HTML fixe en définit la structure et 
• ${...} permet de calculer le contenu à insérer. 

🥷🏼 Ainsi, si le tableau contient davantage de fruits, la liste s’adapte automatiquement.

Le problème des structures hétérogènes

🪛Comment afficher dans un même tableau HTML des objets dont la structure est inconnue et les attributs différents ? Faut-il prévoir manuellement une colonne pour chaque attribut possible ?

🛟La solution : parcourir dynamiquement les attributs des objets pour construire automatiquement les colonnes du tableau et afficher les données disponibles.

🆘 structure hétérogénes : methodes