JavaScript -JSON
JSON ist ein Format zum Speichern und Transportieren von Daten.
JSON wird häufig verwendet, wenn Daten von einem Server an eine Webseite gesendet werden.
Was ist JSON?
- JSON steht für Java S cript Object Notation _
- JSON ist ein einfaches Datenaustauschformat
- JSON ist sprachunabhängig *
- JSON ist „selbstbeschreibend“ und leicht verständlich
* Die JSON-Syntax wird von der JavaScript-Objektnotationssyntax abgeleitet, aber das JSON-Format ist nur Text. Code zum Lesen und Generieren von JSON-Daten kann in jeder Programmiersprache geschrieben werden.
JSON-Beispiel
Diese JSON-Syntax definiert ein Mitarbeiterobjekt: ein Array von 3 Mitarbeiterdatensätzen (Objekten):
JSON-Beispiel
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
Das JSON-Format wird zu JavaScript-Objekten ausgewertet
Das JSON-Format ist syntaktisch identisch mit dem Code zum Erstellen von JavaScript-Objekten.
Aufgrund dieser Ähnlichkeit kann ein JavaScript-Programm JSON-Daten problemlos in native JavaScript-Objekte konvertieren.
JSON-Syntaxregeln
- Daten befinden sich in Name/Wert-Paaren
- Daten werden durch Kommas getrennt
- Geschweifte Klammern halten Objekte
- Eckige Klammern halten Arrays
JSON-Daten – Ein Name und ein Wert
JSON-Daten werden als Name/Wert-Paare geschrieben, genau wie JavaScript-Objekteigenschaften.
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. JavaScript-Namen nicht.
JSON-Objekte
JSON-Objekte werden in geschweiften 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 "Mitarbeiter" ein Array. Es enthält drei Objekte.
Jedes Objekt ist eine Aufzeichnung einer Person (mit einem Vornamen und einem Nachnamen).
Konvertieren eines JSON-Texts in ein JavaScript-Objekt
Eine häufige Verwendung von JSON besteht darin, Daten von einem Webserver zu lesen und die Daten auf einer Webseite anzuzeigen.
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 integrierte JavaScript-Funktion JSON.parse(), um die Zeichenfolge in ein JavaScript-Objekt zu konvertieren:
const obj = JSON.parse(text);
Verwenden Sie schließlich 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>
Weitere Informationen zu JSON finden Sie in unserem JSON-Tutorial .