JavaScript - JSON: Ein Anfängerguide

Hallo da draußen, zukünftige Codewizardinnen und -wizards! Heute machen wir uns auf eine aufregende Reise in die Welt von JSON. Keine Sorge, wenn du vorher noch nie davon gehört hast – bis zum Ende dieses Tutorials wirst du JSON wie ein Profi selbstbewusst nutzen können. Also hol dir dein lieblingsGetränk, setz dich bequem hin und tauchen wir ein!

Was ist JSON?

JSON, was für JavaScript Object Notation steht, ist ein leichtgewichtiges Daten austauschformat. Ich weiß, das klingt kompliziert, aber stelle es dir einfach als eine Möglichkeit vor, wie Computer miteinander kommunizieren und Informationen in einer Weise teilen können, die sowohl für Maschinen als auch für Menschen leicht verständlich ist.

Stelle dir vor, du schreibst Zettel im Unterricht (natürlich rate ich dazu nicht!). JSON ist wie eine standardisierte Methode, diese Zettel zu schreiben, damit jede Person, die sie liest, die Nachricht schnell und einfach verstehen kann.

JSON Features

Bevor wir ins Detail gehen, schauen wir uns an, was JSON so besonders macht:

1. Es ist leichtgewichtig und einfach zu lesen.
2. Es ist sprachunabhängig (nicht nur für JavaScript!).
3. Es basiert auf zwei universellen Strukturen: Objekten und Arrays.

Diese Merkmale machen JSON zu einer hervorragenden Wahl für Daten Speicherung und -übertragung, weshalb es so weit verbreitet in Webanwendungen verwendet wird.

JSON Syntax

Nun schauen wir uns die grundlegende Syntax von JSON an. Keine Sorge, wenn es zunächst seltsam aussieht – wir werden es Schritt für Schritt durchgehen.

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

Dies ist ein einfaches JSON-Objekt. Lassen wir es auseinandernehmen:

• Das gesamte Objekt ist in geschweiften Klammern {} eingeschlossen.
• Innen haben wir Schlüssel-Wert-Paare.
• Schlüssel sind immer Zeichenketten und in doppelten Anführungszeichen eingeschlossen.
• Werte können Zeichenketten, Zahlen, Booleans, Arrays, Objekte oder null sein.
• Schlüssel-Wert-Paare werden durch Kommata getrennt.

JSON Daten

JSON kann verschiedene Arten von Daten darstellen. Sehen wir uns einige Beispiele an:

Zeichenketten

{"message": "Hello, World!"}

Zahlen

{"age": 30}

Booleans

{"isStudent": true}

Null

{"spouse": null}

Denke daran, dass JSON darum geht, Daten auf eine Weise darzustellen, die leicht zu verstehen und zu verwenden ist. Stelle dir vor, du erstellst ein detailliertes Profil für jede Information.

JSON Objekte

Wir haben bereits ein einfaches JSON-Objekt gesehen, aber lassen uns tiefer einsteigen. JSON-Objekte können mehrere Schlüssel-Wert-Paare und sogar verschachtelte Objekte enthalten.

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

In diesem Beispiel haben wir ein Hauptobjekt mit dem Schlüssel "person". Der Wert von "person" ist ein anderes Objekt, das verschiedene Informationen enthält. Beachte, wie wir Objekte verschachteln und sogar Arrays einbeziehen können (wir werden später mehr darüber sprechen).

JSON Arrays

Arrays in JSON sind geordnete Listen von Werten. Sie sind in eckige Klammern [] eingeschlossen und können jeglichen JSON-Datentyp enthalten.

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

Arrays sind besonders nützlich, wenn du eine Sammlung verwandter Elemente darstellen möchtest. Zum Beispiel eine Liste von Zutaten in einem Rezept oder eine Liste von Highscores in einem Spiel.

JSON Daten abrufen

Nun, da wir wissen, wie man JSON-Daten strukturiert, lernen wir, wie man sie in JavaScript abruft. Wir verwenden das person-Objekt von earlier als Beispiel.

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // Ausgabe: Alice
console.log(data.person.hobbies[1]); // Ausgabe: cycling
console.log(data.person.address.city); // Ausgabe: Wonderland

Wie du siehst, verwenden wir Punktnotation, um Objekteigenschaften abzurufen, und eckige Klammern, um Arrayelemente abzurufen. Es ist wie das Folgen einer Karte, um die genaue Information zu finden, die du möchtest!

JSON Methoden

JavaScript bietet zwei Hauptmethoden zum Arbeiten mit JSON:

Methode	Beschreibung
JSON.parse()	Konvertiert eine JSON-Zeichenkette in ein JavaScript-Objekt
JSON.stringify()	Konvertiert ein JavaScript-Objekt in eine JSON-Zeichenkette

Sehen wir uns diese in Aktion an:

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Ausgabe: John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // Ausgabe: {"name":"Alice","age":25}

Diese Methoden sind wie Übersetzer, die JavaScript und JSON effektiv miteinander kommunizieren lassen.

JSON vs. JavaScript Objekt

Obwohl JSON sehr ähnlich zu JavaScript-Objekten aussieht, gibt es einige wichtige Unterschiede:

1. JSON-Schlüssel müssen Zeichenketten sein und in doppelten Anführungszeichen stehen.
2. JSON-Werte müssen einen der folgenden Typen sein: Zeichenkette, Zahl, Objekt, Array, Boolean oder null.
3. JSON unterstützt keine Funktionen oder Kommentare.

Hier ist ein schneller Vergleich:

// Gültiges JavaScript-Objekt
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// Äquivalent in JSON
let jsonObj = {
"name": "John",
"age": 30
};

Beachte, wie die Funktion und der unzitierte Schlüssel in der JSON-Version nicht vorhanden sind.

Konvertieren einer JSON-Zeichenkette in JavaScript-Objekte

Wir haben bereits gesehen, wie man JSON.parse() verwendet, um eine JSON-Zeichenkette in ein JavaScript-Objekt zu konvertieren, aber lassen wir uns ein komplexeres Beispiel ansehen:

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // Ausgabe: Alice
console.log(obj.pets[0].name); // Ausgabe: Fluffy

Dies ist besonders nützlich, wenn man Daten von einem Server empfängt, die oft in Form einer JSON-Zeichenkette kommen.

Konvertieren eines JavaScript-Objekts in JSON

Ähnlich können wir JSON.stringify() verwenden, um JavaScript-Objekte in JSON-Zeichenketten zu konvertieren. Dies ist oft notwendig, wenn man Daten an einen Server sendet.

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// Ausgabe: {"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

Und das war's! Du hast gerade deinen Crashkurs in JSON abgeschlossen. Denke daran, Übung macht den Meister, also habe keine Angst, mit dem Erstellen und Manipulieren von JSON-Daten zu experimentieren. Bereit, wie ein Profi zu JSONen!

Credits: Image by storyset