Comment remplir dynamiquement du HTML avec les données d'une API-js tutoriel-php.cn

Comment remplir dynamiquement du HTML avec les données d'une API

Mary-Kate Olsen

Libérer： 2025-01-17 00:29:08

original

646 Les gens l'ont consulté

Ce didacticiel montre comment récupérer et afficher des données à partir d'une API de personnage Harry Potter à l'aide de la méthode fetch() de JavaScript. Nous allons créer une page Web remplie dynamiquement avec des informations sur les personnages.

Tout d'abord, nous ciblons l'élément HTML où les données de caractères seront affichées :

<code class="language-javascript">const charsSection = document.getElementById('chars-container');</code>

Copier après la connexion

Ensuite, nous définissons l'URL de l'API et une fonction asynchrone pour récupérer et filtrer les données :

<code class="language-javascript">const charsURL = 'https://hp-api.herokuapp.com/api/characters';

async function getChars() {
    const response = await fetch(charsURL);
    const allCharsArr = await response.json();
    let newCharsArr = [];
    for (let i = 0; i < allCharsArr.length; i++) {
        if (allCharsArr[i].image.length > 0 && allCharsArr[i].species === 'human') {
            newCharsArr.push(allCharsArr[i]);
        }
    }
    return newCharsArr;
}</code>

Copier après la connexion

La fonction getChars() récupère les données, les convertit en JSON et filtre les résultats pour inclure uniquement les caractères humains avec les images associées. Ce filtrage corrige le caractère incomplet potentiel de l'API.

La page Web est remplie à l'aide de cette fonction asynchrone :

<code class="language-javascript">async function buildPage() {
    const newCharsArr = await getChars();
    for (let i = 0; i < newCharsArr.length; i++) {
        // ... (HTML card creation logic here) ...
    }
}</code>

Copier après la connexion

Cette buildPage() fonction parcourt les données filtrées du personnage et crée dynamiquement des éléments HTML (cartes de personnage) pour afficher l'image, le nom, l'ascendance, la maison de Poudlard et l'acteur/actrice du personnage. Le innerHTML de charsSection est mis à jour pour afficher ces cartes. Parce que getChars() est asynchrone, buildPage() doit aussi être asynchrone et await le résultat de getChars().

L'image suivante montre un échantillon de la page Web remplie. Les détails de style sont omis par souci de concision, mais le code complet du projet est disponible sur [lien vers le projet].

How to Populate HTML Dynamically with Data from An API