JavaScript-JSON

JSON ist ein Format zur Speicherung und Übertragung von Daten.

JSON wird häufig verwendet, wenn Daten vom Server an eine Webseite gesendet werden.

Was ist JSON?

  • JSON bezieht sich auf JJavaSScript OObjekt Notation
  • JSON ist ein leichtes Daten-Austausch-Format
  • JSON ist sprachunabhängig *
  • JSON ist "self-documenting" und leicht verständlich

* Die Syntax von JSON ist der Syntax der JavaScript-Objektsymbole entliehen, aber das JSON-Format ist rein textuell. Code zum Lesen und Generieren von JSON-Daten kann in jeder Programmiersprache geschrieben werden.

JSON-Beispiel

JSON-Syntax definiert ein Mitarbeiter-Objekt: Ein Array (Objekte) mit drei Mitarbeiter-Einträgen:

JSON-Beispiel

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

Der JSON-Format wird als JavaScript-Objekt bewertet

Der JSON-Format ist syntaktisch identisch mit dem Code zur Erstellung von JavaScript-Objekten.

Aufgrund dieser Ähnlichkeit können JavaScript-Programme JSON-Daten leicht in lokale JavaScript-Objekte umwandeln.

JSON-Syntax-Regeln

  • Daten sind Name/Wert-Paare
  • Daten werden durch Kommas getrennt
  • Klammern speichern Objekte
  • Klammern speichern Arrays

JSON-Daten - Namen und Werte

Die Schreibweise von JSON-Daten ist ähnlich wie die von JavaScript-Objektattributen.

Name/Wert-Paare bestehen aus (in doppelten Anführungszeichen stehenden) Feldnamen, gefolgt von einem Doppelpunkt, und dann dem Wert:

"firstName":"Bill"

JSON-Namen müssen in doppelten Anführungszeichen stehen. JavaScript-Namen benötigen das nicht.

JSON Objekte

JSON-Objekte werden in geschweiften Klammern notiert.

Wie JavaScript können auch Objekte mehrere Name/Wert-Paare enthalten:

{"firstName":"Bill", "lastName":"Gates"}

JSON Arrays

JSON-Arrays werden in eckigen Klammern notiert.

Wie JavaScript können Arrays auch Objekte enthalten:

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

Im obigen Beispiel ist das Objekt "employees" ein Array. Es enthält drei Objekte.

Jedes Objekt stellt eine Eintragung einer Person dar (mit Namen und Nachnamen).

Konvertieren Sie JSON-Text in JavaScript-Objekte

Der häufigste Gebrauch von JSON ist das Lesen von Daten von einem Webserver und das Anzeigen dieser Daten auf einer Webseite.

Zur Vereinfachung kann eine Zeichenkette als Eingabe verwendet werden.

Zunächst wird ein JavaScript-String mit JSON-Syntax erstellt:

var text = '{ "employees" : [
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

Dann konvertieren Sie diesen String in ein JavaScript-Objekt mit dem eingebauten JavaScript-Funktion JSON.parse():

var obj = JSON.parse(text);

Schließlich verwenden Sie diesen neuen JavaScript-Objekt in Ihrer Seite:

Beispiel

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

selbst ausprobieren

Sie können auf unserer JSON-Tutorial Mehr über JSON lesen.