JavaScript JSON


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


JSON ist ein Format zum Speichern und Transportieren von Daten.

JSON wird häufig verwendet, wenn Daten von einem Server an ein Web gesendet werden Seite.


Was ist JSON?

  • JSON steht für JavaSscript Object notation

  • JSON ist ein leichtes Datenaustauschformat

  • JSON ist sprachunabhängig *

  • JSON ist „selbstbeschreibend“ und leicht zu verstehen

* Die JSON-Syntax ist von der JavaScript-Objektnotationssyntax abgeleitet, das JSON-Format besteht jedoch nur aus Text. Code zum Lesen und Generieren von JSON-Daten kann in jeder Programmierung geschrieben werden Sprache.


JSON-Beispiel

Diese JSON-Syntax definiert ein Mitarbeiterobjekt: ein Array aus 3 Mitarbeiterdatensätzen (Objekten):

JSON-Beispiel

{
"employees":[
  {"firstName":"John", "lastName":"Doe"}, 
  {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

Das JSON-Format wertet JavaScript-Objekte aus

Das JSON-Format ist syntaktisch identisch mit dem Code zum Erstellen JavaScript-Objekte.

Aufgrund dieser Ähnlichkeit ein JavaScript-Programm kann JSON-Daten problemlos in native konvertieren JavaScript-Objekte.


JSON-Syntaxregeln

  • Die Daten liegen in Name/Wert-Paaren vor

  • Die Daten werden durch Kommas getrennt

  • Geschweifte Klammern halten Gegenstände

  • Eckige Klammern enthalten Arrays



JSON-Daten - Ein Name und ein Wert

JSON-Daten werden wie JavaScript-Objekte als Name/Wert-Paare geschrieben Eigenschaften.

Ein Name/Wert-Paar besteht aus einem Feldnamen (in doppelten Anführungszeichen), gefolgt von einem Doppelpunkt, gefolgt von einem Wert:

"firstName":"John"

JSON-Namen erfordern doppelte Anführungszeichen. Bei JavaScript-Namen ist dies nicht der Fall.


JSON-Objekte

JSON-Objekte werden in geschweifte Klammern geschrieben.

Genau wie in JavaScript können Objekte mehrere Name/Wert-Paare enthalten:

{"firstName":"John", "lastName":"Doe"}

JSON-Arrays

JSON-Arrays werden in eckige Klammern geschrieben.

Genau wie in JavaScript kann ein Array Objekte enthalten:

"employees":[
   
{"firstName":"John", "lastName":"Doe"}, 
   
{"firstName":"Anna", "lastName":"Smith"}, 
   
{"firstName":"Peter", "lastName":"Jones"}
]

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

Jedes Objekt ist ein Datensatz einer Person (mit einem Vor- und einem Nachnamen).


Konvertieren eines JSON-Textes in ein JavaScript-Objekt

Eine häufige Verwendung von JSON besteht darin, Daten von einem Webserver zu lesen. und die Daten auf einer Webseite anzeigen.

Der Einfachheit halber kann dies anhand einer Zeichenfolge als Eingabe demonstriert werden.

Erstellen Sie zunächst eine JavaScript-Zeichenfolge mit JSON-Syntax:

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Verwenden Sie dann die in JavaScript integrierte Funktion JSON.parse(), um die Zeichenfolge in ein JavaScript-Objekt zu konvertieren:

const obj = JSON.parse(text);

Verwenden Sie abschließend das neue JavaScript-Objekt auf Ihrer Seite:

Beispiel

<p id="demo"></p>

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

Weitere Informationen zu JSON finden Sie in unserem JSON-Tutorial.