JSON: Daten vom Server laden

IT 12.6 – Webanwendungen · Einheit 8 · Café-App Schritt 8

Lernziele

Du kannst den Aufbau von JSON beschreiben und gültiges JSON von ungültigem unterscheiden.
Du kannst JSON-Text mit JSON.parse in Objekte umwandeln und mit JSON.stringify zurück.
Du kannst Daten mit fetch vom Server laden und Fehler dabei behandeln.
Du kannst die Antwort einer Schnittstelle (API) auswerten und als HTML anzeigen.
Du kannst eine JSON-Struktur für eigene Daten entwerfen.

Rückblick

1. Wie greift man auf den Namen des zweiten Produkts in der Liste produkte zu?

produkte[1].name, denn der Index beginnt bei 0.

2. Was liefert filter?

Eine neue Liste mit allen Einträgen, für die die Bedingung erfüllt ist.

3. Wo sollte stehen, welche Produkte heute ausverkauft sind: im Browser oder auf dem Server?

Auf dem Server. Nur dort kann das Team es an einer Stelle für alle ändern (Einheit 1).

Die Speisekarte steckt im Code

Die Produkte des Cafés stehen jetzt in app.js. Wenn eine Brezel ausverkauft ist oder ein Preis sich ändert, muss jemand den Programmcode ändern. Das Café-Team kann aber nicht programmieren, und ein Tippfehler legt die ganze App lahm.

Besser wäre es, wenn die Daten getrennt vom Code auf dem Server lägen und die App sie beim Start abholt. So arbeiten fast alle Webanwendungen: Wetter-Apps, Fahrpläne, Online-Shops holen ihre Daten in einem einheitlichen Format vom Server. Dieses Format heißt meist JSON.

Erkunden: Daten als Text

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Gültig oder nicht? mittel

JSON.parse(text) versucht, einen Text als JSON zu lesen. Gelingt das nicht, gibt es einen Fehler. Das Programm probiert acht Texte aus.

Vermute zuerst für jeden Text, ob er gültig ist. Führe den Code dann aus.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Gib an, welche Texte gültig sind.

b) Leite aus den ungültigen Texten mindestens vier Regeln für JSON ab.

c) Vergleiche Text 1 mit der Schreibweise eines Objekts in JavaScript aus Einheit 5. Nenne Unterschiede.

Lösung

Erkundung 2: Daten vom Server holen mittel

Im Spielplatz gibt es einen simulierten Server. Er hat die Datei busplan.json mit den nächsten Abfahrten an der Haltestelle vor der Schule.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe den Aufbau der Daten in busplan.json.

b) Ergänze die Funktion so, dass für jede Abfahrt ein Listenpunkt wie Linie 12 nach Bahnhof in 3 min entsteht.

c) Ändere den Dateinamen in fahrplan.json. Beschreibe, was jetzt in der Konsole steht.

d) Vermute, wozu await dient.

Tipp 1

Zu b): daten.abfahrten ist eine Liste von Objekten, genau wie in Einheit 5.

Lösung

JSON

Vergleicht eure Ergebnisse. JSON (JavaScript Object Notation, gesprochen wie der Name „Jason“) ist ein Textformat für Daten. Es ist an die Schreibweise von JavaScript-Objekten angelehnt, wird aber von fast allen Programmiersprachen gelesen, auch von PHP, Python oder Java. Deshalb nutzen es Server und Browser, um Daten auszutauschen.

{
  "cafe": "Pause",
  "geoeffnet": true,
  "produkte": [
    { "id": 1, "name": "Kakao", "preis": 1.5, "vegan": false },
    { "id": 2, "name": "Tee", "preis": 1.0, "vegan": true }
  ],
  "hinweis": null
}

erlaubte Werte	Beispiel
Text	`"Kakao"` (doppelte Anführungszeichen)
Zahl	`1.5`, `-3`, `20` (Punkt statt Komma)
Wahrheitswert	`true`, `false`
leer	`null`
Liste	`[ … ]`
Objekt	`{ "name": Wert, … }`

JSON-Text und Objekte

	JSON	JavaScript-Objekt
was ist es?	Text (zum Speichern und Übertragen)	Daten im Speicher des Programms
Namen	immer `"in Anführungszeichen"`	meist ohne
umwandeln	`JSON.parse(text)` → Objekt	`JSON.stringify(objekt)` → Text

const text = '{ "name": "Kakao", "preis": 1.5 }';
const produkt = JSON.parse(text);      // jetzt ein Objekt
console.log(produkt.preis);            // 1.5

const zurueck = JSON.stringify(produkt);           // '{"name":"Kakao","preis":1.5}'
const lesbar = JSON.stringify(produkt, null, 2);   // mit Zeilen und Einrückung

Daten laden mit fetch

Mit fetch(adresse) schickt das Programm eine Anfrage an den Server, ohne die Seite neu zu laden. Weil die Antwort etwas dauert, schreibt man die Funktion mit async und wartet mit await:

async function speisekarteLaden() {
  const antwort = await fetch('speisekarte.json');   // 1. Anfrage schicken, auf Antwort warten
  const daten = await antwort.json();                // 2. JSON-Text lesen → Objekt
  karteAnzeigen(daten.produkte);                     // 3. anzeigen
}

Eine Adresse auf dem Server, die Daten (meist als JSON) liefert, nennt man Schnittstelle oder API (Application Programming Interface). Viele Dienste bieten APIs an, zum Beispiel für Wetterdaten oder Fahrpläne. So entsteht eine dynamische Seite: Das HTML bleibt gleich, die Daten kommen aktuell vom Server.

Fehler behandeln

Beim Laden kann einiges schiefgehen: keine Verbindung, Datei nicht gefunden (Status 404), Fehler auf dem Server (Status 500), kaputtes JSON. Ohne Behandlung bleibt die Seite einfach leer.

async function speisekarteLaden() {
  try {
    const antwort = await fetch('speisekarte.json');
    if (!antwort.ok) {                                  // ok ist true bei Status 200–299
      throw new Error('Status ' + antwort.status);
    }
    const daten = await antwort.json();
    karteAnzeigen(daten.produkte);
  } catch (fehler) {
    console.error(fehler);
    zeigeMeldung('Die Speisekarte konnte gerade nicht geladen werden.');
  }
}

try … catch fängt Fehler ab: Tritt im try-Teil ein Fehler auf, springt das Programm in den catch-Teil. throw löst selbst einen Fehler aus.

Daten speichern

JSON.stringify braucht man, wenn Daten gespeichert oder verschickt werden, zum Beispiel eine Bestellung an den Server (Einheit 10). Damit Daten dauerhaft und auf allen Geräten verfügbar sind, müssen sie auf einem Server gespeichert werden. Der Browser kann zwar Daten im eigenen Speicher (localStorage) ablegen, aber nur auf diesem einen Gerät.

Café-App: Schritt 8

Café-App, Schritt 8: Die Speisekarte als JSON schwer

Webserver einrichten: Installiere in VSCodium die Erweiterung „Live Server“ (Erweiterungen, Suche „Live Server“, Anbieter ritwickdey). Öffne deinen Café-Ordner und klicke unten rechts auf „Go Live“. Die Seite öffnet sich unter einer Adresse wie http://127.0.0.1:5500/.
Lege im Café-Ordner die Datei speisekarte.json an. Sie enthält ein Objekt mit stand (Datum als Text) und produkte (die sechs Produkte aus app.js). Jedes Produkt bekommt zusätzlich "ausverkauft": false. Setze es bei der Brezel auf true. Du kannst die Datei auch herunterladen: speisekarte.json.
Ersetze in app.js die feste Liste durch let PRODUKTE = []; und schreibe eine Funktion speisekarteLaden(), die die Datei mit fetch lädt, PRODUKTE füllt und danach die Speisekarte und die Auswahlliste anzeigt.
Ausverkaufte Produkte erscheinen in der Karte mit dem Hinweis „ausverkauft“, ihr Knopf ist deaktiviert (knopf.disabled = true). In der Auswahlliste fehlen sie.
Kann die Datei nicht geladen werden, steht in der Tabelle „Die Speisekarte konnte gerade nicht geladen werden.“
Teste: Benenne die Datei kurz um und lade die Seite neu. Erscheint die Meldung?

Tipp 1

Der Aufruf am Ende von app.js sieht so aus: speisekarteLaden();. Darin, nach dem Laden: aktualisieren(); auswahlFuellen();. Die Funktionen müssen also erst laufen, wenn die Daten da sind.

Tipp 2

Prüfe die Datei mit einem JSON-Prüfer oder in der Konsole: JSON.parse( + Inhalt + ). Ein vergessenes oder überzähliges Komma ist der häufigste Fehler.

Stand nach Schritt 8

Aufgaben

Aufgabe 1: JSON lesen leicht

Eine Wetterstation auf dem Schuldach liefert:

{
  "station": "Schuldach",
  "messungen": [
    { "uhrzeit": "08:00", "temperatur": 6.5, "regen": false },
    { "uhrzeit": "10:00", "temperatur": 9.0, "regen": true },
    { "uhrzeit": "12:00", "temperatur": 11.5, "regen": true }
  ],
  "warnung": null
}

Der Text wurde mit const daten = JSON.parse(text); umgewandelt. Gib den Wert der folgenden Ausdrücke an:

a) daten.station

b) daten.messungen.length

c) daten.messungen[1].temperatur

d) daten.messungen[2].regen

e) daten.warnung

f) daten.messungen[3]

Lösung

Aufgabe 2: Fehler im JSON leicht

Diese Datei für die Bücherei soll gültiges JSON sein. Gib alle fünf Fehler an und schreibe die Datei richtig auf.

{
  'bibliothek': "Stadtbücherei",
  "oeffnungszeiten": "Mo–Fr 10–18 Uhr", // ohne Feiertage
  buecher: [
    { "titel": "Tschick", "ausgeliehen": "ja" },
    { "titel": "Die Welle", "ausleihgebuehr": 0,50 },
  ]
}

Lösung

Aufgabe 3: Die Mensa-Karte laden mittel

Der Server der Mensa hat die Datei mensa.json. Implementiere laden(): Für jedes Gericht entsteht in #gerichte ein Listenpunkt Linsensuppe (2.8 €). Vegetarische Gerichte bekommen die Klasse veggie. Kann die Datei nicht geladen werden, steht in #meldung der Text Keine Daten.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Verwende die Variable datei beim Aufruf von fetch, damit die Prüfung den Fehlerfall testen kann: fetch(datei).

Lösung

Aufgabe 4: Eine JSON-Struktur entwerfen mittel

Der Sportverein möchte seine Trainingszeiten als JSON auf dem Server ablegen, damit Webseite und App sie anzeigen können. Zu jeder Mannschaft gehören ein Name, die Altersklasse, eine Trainerin oder ein Trainer und mehrere Trainingstermine (Wochentag, Beginn, Ende, Halle). Außerdem soll angegeben werden, ob noch neue Mitglieder aufgenommen werden.

Entwirf eine passende JSON-Struktur mit mindestens zwei Mannschaften. Begründe deine Wahl der Datentypen.

Tipp 1

Mehrere gleichartige Dinge → Liste. Ein Ding mit Eigenschaften → Objekt. Ja/nein → Wahrheitswert.

Lösung (Beispiel)

Aufgabe 5: Die Antwort einer Schnittstelle anzeigen schwer

Die Schnittstelle eines Kinos liefert nach einem Aufruf diese Antwort (bereits mit JSON.parse umgewandelt und an die Funktion übergeben):

{
  "kino": "Lichtspiele am Markt",
  "vorstellungen": [
    { "film": "Die Wolke", "beginn": "17:30", "saal": 1, "plaetze": 12, "trailer": "https://kino.example/trailer/wolke" },
    { "film": "Tschick", "beginn": "20:00", "saal": 2, "plaetze": 0, "trailer": "https://kino.example/trailer/tschick" }
  ]
}

Implementiere die Funktion zeigeProgramm(antwort). Sie schreibt in das Element #programm für jede Vorstellung:

Film: Die Wolke
Beginn: 17:30 Uhr, Saal 1
Freie Plätze: 12
Trailer: Ansehen      (Link auf die Adresse aus "trailer")

Bei 0 freien Plätzen steht statt der Zahl ausverkauft.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

Setze einen HTML-Text zusammen, wie in Einheit 5. Für den Link: '<a href="' + v.trailer + '">Ansehen</a>'.

Tipp 2

Für „ausverkauft“ brauchst du vor dem Zusammensetzen eine Variable, die je nach v.plaetze die Zahl oder das Wort enthält.

Lösung

Zusatzaufgabe: Ladeanzeige und Filter schwer Zusatz

Erweitere die Mensa-Seite aus Aufgabe 3:

a) Während die Daten laden, steht in #meldung „Lädt …“. Danach verschwindet der Text.

b) Ein Häkchen „nur vegetarisch“ filtert die geladenen Gerichte, ohne die Datei erneut zu laden.

c) Begründe, warum man die geladenen Daten in einer Variablen aufbewahrt, statt bei jedem Klick neu zu laden.

Lösung (Beispiel)

Zusammenfassung

JSON ist ein Textformat für Daten: Objekte { }, Listen [ ], Texte, Zahlen, true/false, null.
Regeln: doppelte Anführungszeichen für Namen und Texte, Punkt bei Zahlen, kein Komma am Ende, keine Kommentare.
JSON.parse(text) macht aus Text ein Objekt, JSON.stringify(objekt) aus einem Objekt Text.
fetch(adresse) holt Daten vom Server, mit async/await. Die Antwort mit antwort.json() lesen.
Fehler behandeln: antwort.ok prüfen und try … catch. Den Nutzerinnen und Nutzern eine verständliche Meldung zeigen.
Eine API ist eine Adresse auf dem Server, die Daten liefert. fetch funktioniert nur über einen Webserver, nicht mit file:///.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du den Aufbau von JSON beschreiben und Fehler finden? → Erkundung 1, JSON, Aufgabe 1, Aufgabe 2
Kannst du mit JSON.parse und JSON.stringify umwandeln? → JSON-Text und Objekte
Kannst du Daten mit fetch laden und Fehler behandeln? → Erkundung 2, Daten laden mit fetch, Fehler behandeln, Aufgabe 3, Café-App
Kannst du die Antwort einer Schnittstelle anzeigen? → Aufgabe 5
Kannst du eine JSON-Struktur entwerfen? → Aufgabe 4

Wortspeicher

Begriff	Bedeutung in einfachen Worten
JSON	Textformat für Daten aus Objekten, Listen und einfachen Werten
`JSON.parse`	wandelt JSON-Text in ein Objekt um
`JSON.stringify`	wandelt ein Objekt in JSON-Text um
`fetch`	schickt eine Anfrage an den Server, ohne die Seite neu zu laden
`async` / `await`	Funktion, die auf Ergebnisse warten kann / warte auf das Ergebnis
Promise	„Versprechen“ auf ein Ergebnis, das später kommt
Statuscode	Zahl in der Antwort des Servers, z. B. 200 (in Ordnung), 404 (nicht gefunden)
`try … catch`	Fehler abfangen und behandeln
API (Schnittstelle)	Adresse auf einem Server, die Daten für Programme liefert
Live Server	Erweiterung für VSCodium, die einen kleinen Webserver auf dem eigenen Rechner startet

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „dynamisches Aktualisieren der Darstellung“, „Client/Server-Architektur“ (Stand November 2022). JSON ist ein Wunsch der Lehrkraft und kommt in den Abschlussprüfungen vor (Antwort einer API).
JSON nach ECMA-404 und RFC 8259. Freie Dokumentation: MDN Web Docs, developer.mozilla.org/de (Du verlässt jetzt Maternet).
Erweiterung „Live Server“ von Ritwick Dey (MIT-Lizenz), erhältlich über open-vsx.org (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt. Die Adressen kino.example sind Beispieladressen nach RFC 2606.