So füllen Sie HTML dynamisch mit Daten aus einer API

Dieses Tutorial zeigt, wie Sie mithilfe der fetch()-Methode von JavaScript Daten von einer Harry-Potter-Charakter-API abrufen und anzeigen. Wir erstellen eine Webseite, die dynamisch mit Charakterinformationen gefüllt wird.

Zuerst zielen wir auf das HTML-Element, in dem Zeichendaten angezeigt werden:

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

Als nächstes definieren wir die API-URL und eine asynchrone Funktion zum Abrufen und Filtern der Daten:

<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>

Die Funktion getChars() ruft Daten ab, konvertiert sie in JSON und filtert die Ergebnisse so, dass nur menschliche Zeichen mit zugehörigen Bildern enthalten sind. Diese Filterung behebt potenzielle API-Unvollständigkeiten.

Die Webseite wird mit dieser asynchronen Funktion gefüllt:

<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>

Diese buildPage()-Funktion durchläuft die gefilterten Charakterdaten und erstellt dynamisch HTML-Elemente (Charakterkarten), um das Bild, den Namen, die Abstammung, das Hogwarts-Haus und den Schauspieler/die Schauspielerin des Charakters anzuzeigen. Das innerHTML von charsSection wird aktualisiert, um diese Karten anzuzeigen. Da getChars() asynchron ist, muss buildPage() auch asynchron sein und await das Ergebnis von getChars().

Das folgende Bild zeigt ein Beispiel der bevölkerten Webseite. Der Kürze halber werden Gestaltungsdetails weggelassen, aber der vollständige Projektcode ist unter [Link zum Projekt] verfügbar.

Dieses Beispiel zeigt die dynamische Webseitenpopulation mithilfe von API-Daten. Feedback und Teilen sind willkommen!

Links

Projekt in Aktion

Projekt-Repo

MDN-Webdokumente „Einführung in Web-APIs“

Ursprünglich veröffentlicht auf Medium für JavaScript in einfachem Englisch am 14. November 2022

Das obige ist der detaillierte Inhalt vonSo füllen Sie HTML dynamisch mit Daten aus einer API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!