JSON-Grundlagen

JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenaustauschformat, das sowohl für Menschen leicht lesbar als auch für Maschinen einfach zu analysieren und zu generieren ist. In modernen Webanwendungen wie dem MERN Stack ist JSON das Standardformat für den Datenaustausch zwischen Client und Server.

Was ist JSON?

JSON ist ein textbasiertes Format, das ursprünglich von JavaScript abgeleitet wurde, aber inzwischen sprachunabhängig ist. Es wird verwendet, um strukturierte Daten darzustellen und folgt einer einfachen Syntax:

• Daten werden als Schlüssel-Wert-Paare dargestellt
• Daten sind durch Kommas getrennt
• Objekte werden durch geschweifte Klammern {} umschlossen
• Arrays werden durch eckige Klammern [] umschlossen

JSON-Syntaxregeln

Die Syntax von JSON folgt einigen einfachen, aber strikten Regeln:

1. Datentypen in JSON

JSON unterstützt die folgenden Datentypen:

• String: Text in doppelten Anführungszeichen: "Hallo Welt"
• Number: Zahlen ohne Anführungszeichen: 42 oder 3.14
• Boolean: true oder false ohne Anführungszeichen
• Array: Eine geordnete Liste von Werten: [1, 2, 3] oder ["rot", "grün", "blau"]
• Object: Eine ungeordnete Sammlung von Schlüssel-Wert-Paaren: {"name": "Max", "alter": 30}
• null: Repräsentiert einen leeren Wert: null

2. Grundlegende Formatierung

• Objekt: Ein JSON-Objekt beginnt und endet mit geschweiften Klammern {}
• Array: Ein JSON-Array beginnt und endet mit eckigen Klammern []
• Schlüssel: Müssen in doppelten Anführungszeichen stehen und sind Strings
• Werte: Können Strings, Zahlen, Objekte, Arrays, Booleans oder null sein
• Paare: Schlüssel und Wert werden durch einen Doppelpunkt : getrennt
• Mehrere Einträge: Werden durch Kommas , getrennt

3. Beispiel eines JSON-Objekts

{
  "name": "Max Mustermann",
  "alter": 30,
  "istAktiv": true,
  "interessen": ["Programmieren", "Lesen", "Sport"],
  "adresse": {
    "strasse": "Musterstrasse 123",
    "stadt": "Berlin",
    "plz": "10115"
  },
  "kontakt": null
}

4. Wichtige Einschränkungen

• Kommentare sind nicht erlaubt
• Schlüssel müssen immer in doppelten Anführungszeichen stehen
• Einfache Anführungszeichen sind nicht erlaubt
• Schlüssel sollten eindeutig sein (innerhalb desselben Objekts)
• Nachgestellte Kommas sind nicht erlaubt (z.B. [1, 2, 3,] ist ungültig)

JSON vs. JavaScript-Objekte

Obwohl JSON von JavaScript abgeleitet ist, gibt es wichtige Unterschiede:

JSON	JavaScript-Objekte
Schlüssel müssen in doppelten Anführungszeichen stehen	Schlüssel können ohne Anführungszeichen sein
Unterstützt nur eine begrenzte Anzahl von Datentypen	Unterstützt zusätzliche Datentypen (z.B. Funktionen, Dates)
Kann keine Methoden enthalten	Kann Methoden (Funktionen) enthalten
Kann nicht auf Variablen verweisen	Kann Variablen und Referenzen verwenden
{"name": "Max"}	{name: "Max"}

JSON in JavaScript verarbeiten

JavaScript bietet eingebaute Methoden zum Konvertieren zwischen JSON-Strings und JavaScript-Objekten:

JSON.parse(): Von String zu Objekt

Die Methode JSON.parse() wandelt einen JSON-String in ein JavaScript-Objekt um:

// JSON-String
const jsonString = '{"name": "Max", "alter": 30, "istAktiv": true}';

// Konvertierung zu JavaScript-Objekt
const person = JSON.parse(jsonString);

// Zugriff auf Eigenschaften
console.log(person.name);      // Ausgabe: Max
console.log(person.alter);     // Ausgabe: 30
console.log(person.istAktiv);  // Ausgabe: true

JSON.stringify(): Von Objekt zu String

Die Methode JSON.stringify() wandelt ein JavaScript-Objekt in einen JSON-String um:

// JavaScript-Objekt
const person = {
  name: "Anna",
  alter: 25,
  hobbys: ["Musik", "Reisen"]
};

// Konvertierung zu JSON-String
const jsonString = JSON.stringify(person);

console.log(jsonString);
// Ausgabe: {"name":"Anna","alter":25,"hobbys":["Musik","Reisen"]}

// Formatierte Ausgabe (mit Einrückung)
const formattedJson = JSON.stringify(person, null, 2);
console.log(formattedJson);
/*
Ausgabe:
{
  "name": "Anna",
  "alter": 25,
  "hobbys": [
    "Musik",
    "Reisen"
  ]
}
*/

Fehlerbehandlung bei JSON-Operationen

Bei der Arbeit mit JSON können Fehler auftreten, besonders wenn die Syntax nicht korrekt ist:

try {
  // Versuche, ungültigen JSON-String zu parsen
  const invalidJson = '{"name": "Max", "alter": 30,}'; // Ungültiges nachgestelltes Komma
  const person = JSON.parse(invalidJson);
} catch (error) {
  console.error("JSON-Fehler:", error.message);
  // Ausgabe: JSON-Fehler: Unexpected token } in JSON at position 27
}

JSON in der MERN-Stack-Kommunikation

Im MERN Stack wird JSON für die Datenkommunikation zwischen allen Komponenten verwendet:

1. React (Frontend) sendet und empfängt Daten als JSON
2. Express (Backend) verarbeitet JSON-Anfragen und sendet JSON-Antworten
3. MongoDB speichert Daten in einem BSON-Format (binäres JSON)

// Beispiel für eine Fetch-Anfrage, die JSON sendet und empfängt
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Max Mustermann',
    email: 'max@example.com'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));

Übung: JSON mit einer öffentlichen API

Aufgabe: JSON verstehen mit Postman

In dieser einfachen Übung werden Sie lernen, wie man JSON-Daten mit einer API verwendet.

Vorbereitung: Öffnen Sie Postman

Aufgabe 1: POST-Anfrage mit einfachem JSON

1. Erstellen Sie eine neue POST-Anfrage an https://jsonplaceholder.typicode.com/posts

2. Fügen Sie im Body-Tab (raw, JSON) dieses einfache JSON ein:

   {
   "title": "Mein Beitrag",
   "body": "Dies ist mein erster JSON-Testbeitrag",
   "userId": 1
   }

3. Senden Sie die Anfrage und beantworten Sie:

• Welchen Statuscode haben Sie erhalten?
• Welche Daten hat der Server zurückgesendet?
• Woher kommt die ID im Antwortobjekt?

Aufgabe 2: JSON korrigieren

1. Hier ist ein fehlerhaftes JSON. Finden und korrigieren Sie den Fehler:

   {
   "title": "Fehlerhafter Beitrag",
   "body": "Hier ist ein Fehler
   "userId": 1
   }

2. Wenn Sie den Fehler korrigiert haben, senden Sie es als POST-Anfrage

Aufgabe 3: JSON-Objekt erstellen

1. Erstellen Sie ein JSON-Objekt für einen Blogbeitrag mit:

   • Einem Titel
   • Einem Text
   • Einem Autor
   • Einem Datum
   • Mindestens zwei Tags in einem Array

2. Senden Sie Ihr JSON als POST-Anfrage

Zusammenfassung

JSON ist ein vielseitiges und weit verbreitetes Datenaustauschformat:

• Es verwendet eine einfache, lesbare Syntax mit Schlüssel-Wert-Paaren
• Es unterstützt verschiedene Datentypen: Strings, Zahlen, Booleans, Arrays, Objekte und null
• In JavaScript kann JSON mit JSON.parse() und JSON.stringify() verarbeitet werden
• Im MERN Stack ist JSON das Standardformat für die Datenkommunikation zwischen allen Komponenten

Durch das Verständnis von JSON können Sie effektiv mit APIs kommunizieren und Daten zwischen verschiedenen Teilen Ihrer Anwendung austauschen.

Im nächsten Kapitel werden wir uns mit API-Kommunikation und der Fetch API befassen, um mit JSON-Daten von externen Quellen zu arbeiten.