Die Seite aus Daten zeichnen

Geladene Daten sind meistens ein Array von Objekten, und die Seite zeigt sie so an, wie du es aus der Lektion über Webseiten kennst: Eine Funktion leert die Liste und erstellt in einer Schleife Elemente für die Einträge. Neu ist, woher das Array kommt. Speichere es in einer Variable außerhalb der Funktionen, damit die Seite jedes Mal neu gezeichnet werden kann, wenn der Nutzer etwas ändert, ohne den Server noch einmal zu fragen:

let buecher = [];

function zeigeBuecher() {
    buchListe.textContent = "";
    const verfuegbar = buecher.filter((buch) => buch.verfuegbar);
    for (const buch of verfuegbar) {
        const eintrag = document.createElement("li");
        const titel = document.createElement("h2");
        titel.textContent = buch.titel;
        const autor = document.createElement("p");
        autor.textContent = buch.autor;
        eintrag.append(titel, autor);
        buchListe.append(eintrag);
    }
}

async function ladeBuecher() {
    const antwort = await fetch("buecher.json");
    buecher = await antwort.json();
    zeigeBuecher();
}

ladeBuecher();

Ein paar Dinge fallen auf:

• buecher steht außerhalb der Funktionen und wird mit let und einem leeren Array erstellt. ladeBuecher() legt das geladene Array hinein, und zeigeBuecher() zeichnet die Seite daraus. Sobald die Daten da sind, kann jede andere Funktion sie auch benutzen.
• filter() gibt ein neues Array zurück und lässt buecher unverändert, also sind beim nächsten Zeichnen wieder alle Bücher da. Die anderen Array-Methoden, wie sort(), find() und map(), funktionieren mit geladenen Daten wie mit jedem anderen Array.
• Jeder Eintrag hat Elemente in sich: eine Überschrift und einen Absatz. Erstelle sie ebenfalls mit createElement() und setze sie mit append() in den Eintrag, das mehrere Elemente auf einmal annehmen kann.

Wenn der Nutzer auf der Seite etwas auswählt, ruft sein Handler nur wieder zeigeBuecher() auf. Die Funktion liest, was ausgewählt ist, und zeichnet die Liste neu. Der Server wird nicht noch einmal gefragt: Die Daten sind schon im Array.