Einführung in JSON

JSON (JavaScript Object Notation) ermöglicht es, dass JS Objekte in Form von reinen Text gespeichert werden kann. Es verwendet also die JavaScript-Syntax, aber das JSON-Format ist nur Text. In diesem Datenformat ist es problemlos über das Web übertragbar und kann von jeder Programmiersprache gelesen und als Datenformat verwendet werden.

Genauer gesagt, JSON verwendet nur Zeichenketten (Strings) und das ist notwendig, um Daten über Netzwerke mit HTTP zu übertragen. Um ein natives JavaScript Objekt zu erhalten, muss der Text, der schon fast wie ein JS Objekt aussieht, in ein solches umgewandelt werden. JavaScript stellt ein globales JSON-Objekt mit Methoden zur Konvertierung zwischen JSON und JS zur Verfügung.

Zunächst schreiben wir Text im Format JSON, um vorliegende Daten zu modellieren. Die Syntax ist sehr einfach und nach kurzer Zeit intuitiv anwendbar:

Ein Statement besteht immer aus einem Paar aus Eigenschaft und Wert: {"name":"Susanne"}

Eine Zusammenstellung ergibt einJSON Objekt: person= { "name":"Susanne", "age":25, "profession":"Hochschuldozentin", "children":2, "grandchild":null };

JSON Objekte können auch Arrays enthalten: person= {"name":"Susanne", "age":25, "children": [ "Anna", "Tom" ] }

Mit der JavaScript function JSON.parse() kann JSON direkt in ein JavaScript Object umgewandelt werden: myObject = JSON.parse('{"name":"Susanne", "age":25, "profession":"Hochschuldozentin", "children":2, "grandchild":null }');

Linkliste:

JSON - Introduction
JSON Objects
Looping an Object
Nested JSON Objects
JSON Arrays

und dann noch:
JavaScript Objects
JavaScript Arrays

bitte üben, was nicht mehr in Erinnerung ist:

JavaScript Exercises v.a. Objects and Arrays gerne auch Loops

Aufgabe:

18.06.20 Bitte modellieren Sie ihr Lieblingsrezept oder das Rezept des Tages bspw. von Chefkoch in JSON.

später: Bitte laden Sie sich die Datei myMuseum Array_Object_JSON 2.zip von Ilias herunter. Bauen Sie nun eine eigene Datei entsprechend dem Beispiel nach.

  1. Erzeugen Sie ein JS Object, ein JS Array und ein JSON Object mit einem beliebigen Inhalt.
  2. Zugriff auf ein JS Object mit entsprechender Ausgabe
  3. Zugriff auf ein JS Array mit entsprechender Ausgabe
  4. Sortierte Ausgabe eines JS Arrays (auch reverse)
  5. Zugriff auf ein JSON Object und Ausgabe der Eigenschaften und Werte (auch in den verschachtelten Bereichen)
  6. Verwenden Sie zum Schluss die Methode JSON.parse(), um auf ein JSON Object zuzugreifen und lassen Sie die Werte ausgeben.