Produkte aus einer Datei

Bisher standen die Startprodukte direkt in script.js. Apps halten ihre Daten meistens getrennt vom Code, in einer Datei oder auf einem Server, und laden sie, wenn die Seite geöffnet wird. Deine Liste macht das jetzt auch. Ihre Startprodukte stehen jetzt in der Datei produkte.json, im dritten Tab des Editors. Es sind die aus dem Array, dazu Kaffee, damit du siehst, wann die Liste aus der Datei kommt.

Wie du eine Datei lädst, kennst du aus der Lektion über Daten von einem Server. fetch() fragt danach, die Antwort kommt einen Moment später, also wartet eine async-Funktion mit await darauf. antwort.ok sagt, ob die Datei gefunden wurde, und await antwort.json() wandelt ihr JSON in ein Array von Objekten um, genau wie das in produkte:

async function ladeProdukte() {
    const antwort = await fetch("produkte.json");
    produkte = await antwort.json();
    zeigeProdukte();
}

Die Funktion legt ein neues Array in produkte, und eine Konstante kann keinen neuen Wert bekommen, also erstelle produkte jetzt mit let. Es beginnt als leeres Array, [], weil die Liste leer ist, bis die Datei ankommt.

Warum ruft ladeProdukte() selbst zeigeProdukte() auf? Weil die Produkte erst nach dem await da sind. Der Code nach ladeProdukte(); am Ende des Skripts läuft sofort, bevor die Datei ankommt, also würde ein zeigeProdukte() dort eine leere Liste zeigen.

Das Laden dauert einen Moment: eine Drittelsekunde in der Vorschau, mehrere Sekunden bei einer langsamen Verbindung. Währenddessen sagt eine gute App, was los ist. Und wenn die Datei nicht geladen werden kann, sagt sie auch das, statt nur eine leere Liste zu zeigen.

Typische Fehler:

• const produkte beibehalten. Die Konsole zeigt dann TypeError: Assignment to constant variable.
• await vor antwort.json() vergessen. produkte enthält dann ein Promise statt des Arrays, und zeigeProdukte() endet mit TypeError: produkte is not iterable.