JSON

Wenn du eine Website öffnest, fragt dein Browser einen Server danach. Ein Server ist ein Computer im Internet, der die Dateien einer Website aufbewahrt und sie jedem schickt, der danach fragt. Zuerst schickt er die index.html, und dann die Stile, Bilder und Skripte, die die Seite braucht.

Ein Skript auf der Seite kann den Server auch um etwas anderes bitten: nicht um eine ganze Seite, nur um Daten. Ein Online-Shop fragt nach seinen Produkten, ein Chat nach neuen Nachrichten, eine Wetter-App nach der Vorhersage. Die Seite bleibt gleich, und nur die Daten ändern sich. So kann eine Seite Tausende verschiedene Produkte zeigen.

Die Daten reisen als Text, meistens in einem Format namens JSON (kurz für JavaScript Object Notation, ausgesprochen wie der Name Jason). Dateien mit Daten in JSON enden auf .json. Hier ist eine Liste der Tiere in einem kleinen Tierheim:

[
    { "name": "Rex", "art": "Hund", "alter": 3, "geimpft": true },
    { "name": "Luna", "art": "Katze", "alter": 2, "geimpft": false }
]

Das sieht genau aus wie ein Array von Objekten in JavaScript, und daher kommt auch der Name. Aber JSON hat strengere Regeln:

Schlüssel stehen immer in doppelten Anführungszeichen: "name", nicht name.
Auch Text steht in doppelten Anführungszeichen. Einfache Anführungszeichen, wie in 'Rex', sind nicht erlaubt.
Nach dem letzten Element eines Arrays oder der letzten Eigenschaft eines Objekts steht kein Komma.
Es gibt keine Kommentare, Variablen oder Funktionen. Die Werte sind Text, Zahlen, true, false, null, Arrays und Objekte.

Ein einziger Fehler, und der Browser kann die Datei gar nicht lesen. In der Konsole meldet er dann einen SyntaxError, der sagt, wo er hängen geblieben ist: die Zeile und die Spalte oder den Text um den Fehler herum.

Die Übungen haben keinen echten Server, aber die Vorschau spielt einen: Ein Skript kann nach jeder Datei der Übung fragen und bekommt sie nach einem kurzen Moment, als käme sie von einem Server im Internet. In dieser Übung ist das Skript fertig: Es fragt nach tiere.json und zeigt die Tiere in einer Liste an. Wie es das macht, ist das Thema der übernächsten Übung. Vorerst arbeitest du nur mit den Daten, in der Datei tiere.json.

Anweisungen

Die Seite zeigt nur Lade…, weil tiere.json Fehler hat: Das letzte Tier, Max, ist so geschrieben, wie man Objekte in JavaScript schreibt. Korrigiere es so, dass es den Regeln von JSON folgt und die Seite alle drei Tiere zeigt.
Das Tierheim hat ein neues Tier: die Katze Mia, 2 Jahre alt und geimpft. Füge sie am Ende des Arrays hinzu, mit denselben vier Eigenschaften wie die anderen Tiere. Schreibe das Alter als Zahl und true ohne Anführungszeichen, wie die anderen es haben.

ZurückWeiter

JSON

[
    { "name": "Rex", "art": "Hund", "alter": 3, "geimpft": true },
    { "name": "Luna", "art": "Katze", "alter": 2, "geimpft": false }
]

Das sieht genau aus wie ein Array von Objekten in JavaScript, und daher kommt auch der Name. Aber JSON hat strengere Regeln:

Schlüssel stehen immer in doppelten Anführungszeichen: "name", nicht name.
Auch Text steht in doppelten Anführungszeichen. Einfache Anführungszeichen, wie in 'Rex', sind nicht erlaubt.
Nach dem letzten Element eines Arrays oder der letzten Eigenschaft eines Objekts steht kein Komma.
Es gibt keine Kommentare, Variablen oder Funktionen. Die Werte sind Text, Zahlen, true, false, null, Arrays und Objekte.

Anweisungen

Die Seite zeigt nur Lade…, weil tiere.json Fehler hat: Das letzte Tier, Max, ist so geschrieben, wie man Objekte in JavaScript schreibt. Korrigiere es so, dass es den Regeln von JSON folgt und die Seite alle drei Tiere zeigt.

Das Tierheim hat ein neues Tier: die Katze Mia, 2 Jahre alt und geimpft. Füge sie am Ende des Arrays hinzu, mit denselben vier Eigenschaften wie die anderen Tiere. Schreibe das Alter als Zahl und true ohne Anführungszeichen, wie die anderen es haben.