JSON

24.04.2017 09:30 Uhr

JSON

JavaSriptObjectNotation ist ein Textformat (oder auch Datenaustauschformat), welches das Lagern und Austauschen von Daten ermöglicht. Bei einem Datenaustausch zwischen Browser und Server dürfen die Daten nur Text sein. JSON ist Text und kann leicht und ohne kompliziertes Parsing(Übersetzung) zu Javascript Objekte umgewandelt werden. Javascript Objekte wiederum können auch leicht zu JSON umgewandelt werden.

Inhaltsverzeichnis:

  1. Syntax
  2. JSON und XML
  3. Datentypen
  4. Javascript Objekte
  5. JSON Objekte
  6. Verschachtelte JSON Objekte
  7. Arrays
  8. Parsing
  9. Sitzungsaufgabe
  10. Hausaufgabe

Syntax

  • Daten haben immer einen Namen und einen Wert.
  • Diese werden immer durch Kommas getrennt.
  • Die geschweiften Klammern halten die Objekte.
  • Die quadratischen Klammern halten Arrays (siehe Arrays).

Beispiel:

{ "name": "Susanne" }

JSON und XML

JSON ist wie XML, nur einfacher und kürzer. XML braucht immer einen XML Parser, während JSON gleich in ein Javascript Objekt umgewandelt werden kann.

XML Beispiel:

<hki>
    <mitarbeiter>
        <professoren>
            <professor>
                <name>Eide</name>
                <vorname>Øyvind</vorname>
            </professor>
        </professoren>
        <dozenten>
            <dozent>
                <name>Beyl</name>
                <vorname>Sebastian</vorname>
            </dozent>
            <dozent>
                <name>Kurz</name>
                <vorname>Susanne</vorname>
            </dozent>
        </dozenten>
        <shks>
            <shk>
                <name>Malieske</name>
                <vorname>Vera</vorname>
            </shk>
            <shk>
                <name>Michael</name>
                <vorname>Johanna</vorname>
            </shk>
        </shks>
    </mitarbeiter>
</hki>

JSON Beispiel:

{ "hki": {
    "mitarbeiter": {
        "professoren":[
            {"name": "Eide", "vorname": "Øyvind"}
            ],
        "dozenten": [
            {"name": "Beyl", "vorname": "Sebastian"},
            {"name": "Kurz", "vorname": "Susanne"}
            ],
        "shks": [
            {"name": "Malieske", "vorname": "Vera"},
            {"name": "Michael", "vorname": "Johanna"}
            ]
    }
  }
}

Datentypen

In JSON können die Werte einer der folgenden Datentypen sein:

  • ein String
  • eine Zahl
  • ein JSON Objekt (siehe JSON Objekte)
  • ein Array (siehe Arrays)
  • ein Boolean (true/false)
  • null (fehlen eines Wertes)

Die Werte dürfen NICHT einer der folgenden Datentypen sein:

  • eine Funktion
  • ein Datum
  • undefiniert (undefined)

Beispiel 1:

Zahlen brauchen als numerische Werte keine Anführungszeichen:

{ "zahl":30 }

Javascript Objekte

Ein Objekt ist in diesem Kontext die Summe aus Variablen (Eigenschaften) und Funktionen (Methoden) innerhalb eines fest umgrenzten Datenelements. Man kann sich ein Objekt wie im echten Leben als einen Gegenstand (z.B. ein Auto) vorstellen, der Eigenschaften (Gewicht, Hubraum, maximale Geschwindigkeit) und Methoden (Fahren, Bremsen, Hupen) hat.

Beispiel 1:

Dieser Code weist einer Variable namens „auto“ einen einfachen Wert „Fiat“ zu. Das Objekt „auto“ hat nun also die Eigenschaft „Fiat“:

var auto = "Mercedes";

Beispiel 2:

Es können aber auch mehrere Eigenschaften und ihre Werte einer Variable zugewiesen werden und es entsteht ein JS Objekt:

var auto = {typ:"Mercedes", model:500, farbe:"schwarz"};

JSON Objekte

Sind im Grunde wie Javascript Objekte, nur als Text.

In JSON werden die Namen der Werte auch in Anführungszeichen geschrieben:

Beispiel 1:

{"typ":"Mercedes", "model":500, "farbe":"schwarz"}

Zugriff auf Werte:

Die angegebenen Werte in JSON können nun, mittels eines Punktes, in Javascript angesprochen werden:

var obj = {"typ":"Mercedes", "model":500, "farbe":"schwarz"};
var x = obj.typ;

document.getElementById("inhalt").innerHTML = x; // Hier wird auf "inhalt" im DOM zugegriffen

Herausgegeben wird:

Mercedes

Verschachtelte JSON Objekte

Ein JSON Objekt kann auch in einem anderen JSON Objekt vorkommen:

Beispiel 1:

var obj = {
    "name":"Hans",
    "alter":30,
    "autos": {
        "auto1":"Mercedes",
        "auto2":"BMW",
        "auto3":"Fiat"
    }
 }

Und angesprochen werden diese auch wieder mittels der Punkt Notation:

var x = obj.autos.auto2;

Werte modifzieren:

Mit dieser Methode kann man die Werte auch modifizieren:

Beispiel 2:

var x = obj.autos.auto2 = "VW";

Arrays

Erinnerung: Arrays sind „Behälter“ für Ketten gleichartiger Variablen.

Auch Arrays in JSON sind fast das gleiche wie Arrays in Javascript. Die Regeln für die erlaubten Datentypen gelten auch hier.

In JSON werden diese durch eckige Klammern gekennzeichnet:

Beispiel 1:

[ "Mercedes", "BMW", "Fiat" ]

Also:

{
"name":"Hans",
"age":30,
"autos":[ "Mercedes", "BMW", "Fiat" ]
}

Verschachtelte Arrays in JSON Objekten:

Wie bei den verschachtelten JSON Objekten, können auch Arrays verschachtelt werden. Endlose Möglichkeiten:

 {
    "name":"Hans",
    "age":30,
    "autos": [
        { "name":"Ford", "modelle":[ "Fiesta", "Focus", "Mustang" ] },
        { "name":"BMW", "modelle":[ "320", "X3", "X5" ] },
        { "name":"Fiat", "modelle":[ "500", "Panda" ] }
    ]
 }

Werte in Arrays ansprechen:

Wichtig ist hier die Index Zahl des Arrays, mit der man einen Wert auswählen kann.

Beispiel 2:

Gleichzeitig kann man den Wert dann auch noch ändern:

var x = obj.autos[0].name = "VW";

Parsing

Um den Austausch mit einem Web Server zu ermöglichen müssen wir JSON Text in Javascript Objekte umwandeln.

Dies kann man mit JSON.parse() erziehlen.

Beispiel 1:

{"typ":"Mercedes", "model":500, "farbe":"schwarz"}

Jetzt kann man diesen Code in der JSON.parse() Funktion benutzen:

var obj = JSON.parse('{"typ":"Mercedes", "model":500, "farbe":"schwarz"}');

WICHTIG: Die Anführungszeichen in den Klammern bitte nicht vergessen: JSON.parse(‚{…}‘)


Mehr auf W3schools


Sitzungsaufgabe vom 25.04.2017

  1. Erstellen Sie eine neue HTML Seite und schreiben Sie ein einfaches JSON Objekt.
  2. Versuchen Sie nun auf einen Wert zuzugreifen und es entsprechend auf Ihrer Seite auszugeben.

Zu den Sitzungsaufgaben SS17


Hausaufgabe vom 25.04.2017

  1. Erstellen Sie eine neue HTML-Seite.
  2. Schreiben Sie eine JSON Datei (Die Endung ist „.json“) für das Mojito Rezept.
  3. Kopieren Sie den JSON Code in eine Variable in einer JS Datei.
  4. Geben Sie bitte den Namen des Rezeptes und eine Zutat aus.
  5. Versuchen Sie nun in einer  JS Funktion alle Zutaten und den Namen des Rezeptes auszugeben. Nutzen Sie hierzu am besten das XMLHttpRequest-Objekt, sowie eine Schleife, wie im Unterricht besprochen. Sollte das fehlschlagen (was bestimmt nicht passiert 😉 ), orientieren Sie sich bitte an dieser Seite.

Monaco Mojito
Zutaten:
4 cl Wodka
2 cl Limettensaft
2 cl Holundersirup
1 Stück Minzezweig
10 cl Sekt

Zu den Hausaufgaben SS17


Zum Seitenanfang

Schlagwörter: