# 📄 JSON in JavaScript - Umfassende Dokumentation

:::info
**JavaScript Object Notation (JSON)** ist ein leichtgewichtiges, textbasiertes Datenformat, das für den Datenaustausch zwischen Anwendungen verwendet wird. Es basiert auf der JavaScript-Objektsyntax, ist aber sprachunabhängig.
:::

## 🎯 Inhaltsverzeichnis

- [Was ist JSON?](#was-ist-json)
- [JSON-Syntax](#json-syntax)
- [JavaScript JSON-Methoden](#javascript-json-methoden)
- [Praktische Beispiele](#praktische-beispiele)
- [Fehlerbehandlung](#fehlerbehandlung)
- [Best Practices](#best-practices)
- [Häufige Fallstricke](#häufige-fallstricke)

---

## 🔍 Was ist JSON?

JSON (JavaScript Object Notation) ist ein standardisiertes Datenformat, das:

- **Human-readable** ist (für Menschen lesbar)
- **Lightweight** ist (kompakt und effizient)
- **Language-independent** ist (sprachunabhängig)
- **Based on JavaScript syntax** ist (basiert auf JavaScript-Syntax)

### Verwendungszwecke

graph TD
    A[JSON] --> B[Web APIs]
    A --> C[Konfigurationsdateien]
    A --> D[Datenspeicherung]
    A --> E[Client-Server Kommunikation]
    A --> F[NoSQL Datenbanken]

---

## 📝 JSON-Syntax

### Grundlegende Regeln

:::warning
**Wichtige Syntaxregeln:**
- Daten werden in Name/Wert-Paaren gespeichert
- Daten werden durch Kommas getrennt
- Geschweifte Klammern `{}` halten Objekte
- Eckige Klammern `[]` halten Arrays
- Strings müssen in Anführungszeichen stehen
:::

### Unterstützte Datentypen

| Datentyp | Beispiel | Beschreibung |
|----------|----------|--------------|
| `string` | `"Hallo Welt"` | Text in Anführungszeichen |
| `number` | `42`, `3.14` | Ganze Zahlen und Dezimalzahlen |
| `boolean` | `true`, `false` | Wahrheitswerte |
| `null` | `null` | Leerer Wert |
| `object` | `{"key": "value"}` | Sammlung von Key-Value-Paaren |
| `array` | `[1, 2, 3]` | Geordnete Liste von Werten |

### Beispiel einer JSON-Struktur

{
  "name": "Max Mustermann",
  "alter": 30,
  "istAktiv": true,
  "adresse": {
    "straße": "Musterstraße 123",
    "stadt": "Musterstadt",
    "plz": "12345"
  },
  "hobbys": ["Lesen", "Schwimmen", "Programmieren"],
  "partner": null
}

---

## ⚙️ JavaScript JSON-Methoden

### `JSON.stringify()`

Konvertiert JavaScript-Objekte in JSON-Strings.

#### Syntax

JSON.stringify(value[, replacer[, space]])

#### Parameter

| Parameter | Typ | Beschreibung |
|-----------|-----|--------------|
| `value` | any | Der zu konvertierende Wert |
| `replacer` | function/array | Optional: Filterfunktion oder Array |
| `space` | string/number | Optional: Einrückung für Formatierung |

#### Beispiele

// Einfache Konvertierung
const obj = { name: "Anna", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Anna","age":25}'

// Mit Formatierung
const formatted = JSON.stringify(obj, null, 2);
console.log(formatted);
/*
{
  "name": "Anna",
  "age": 25
}
*/

// Mit Replacer-Funktion
const filtered = JSON.stringify(obj, (key, value) => {
  return key === 'age' ? undefined : value;
});
console.log(filtered); // '{"name":"Anna"}'

### `JSON.parse()`

Konvertiert JSON-Strings in JavaScript-Objekte.

#### Syntax

JSON.parse(text[, reviver])

#### Parameter

| Parameter | Typ | Beschreibung |
|-----------|-----|--------------|
| `text` | string | Der zu parsende JSON-String |
| `reviver` | function | Optional: Transformationsfunktion |

#### Beispiele

// Einfaches Parsing
const jsonString = '{"name":"Anna","age":25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Anna"

// Mit Reviver-Funktion
const dateString = '{"date":"2024-01-01T10:00:00.000Z"}';
const objWithDate = JSON.parse(dateString, (key, value) => {
  return key === 'date' ? new Date(value) : value;
});
console.log(objWithDate.date instanceof Date); // true

---

## 💡 Praktische Beispiele

### Beispiel 1: Benutzerdaten verwalten

// Benutzerdaten-Objekt
const benutzer = {
  id: 1,
  name: "Sarah Schmidt",
  email: "[e-mail]",
  registrierung: new Date(),
  einstellungen: {
    theme: "dark",
    sprache: "de",
    benachrichtigungen: true
  },
  tags: ["premium", "aktiv"]
};

// Zu JSON konvertieren (für API-Aufruf)
const benutzerJSON = JSON.stringify(benutzer);

// JSON empfangen und parsen (von API)
const empfangenesDaten = JSON.parse(benutzerJSON);

### Beispiel 2: Lokale Datenspeicherung

// Daten im localStorage speichern
const appEinstellungen = {
  theme: "light",
  autoSave: true,
  lastLogin: new Date().toISOString()
};

localStorage.setItem('einstellungen', JSON.stringify(appEinstellungen));

// Daten aus localStorage laden
const geladeneEinstellungen = JSON.parse(
  localStorage.getItem('einstellungen') || '{}'
);

### Beispiel 3: API-Kommunikation mit fetch

// Daten an API senden
async function benutzerErstellen(benutzerDaten) {
  try {
    const response = await fetch('/api/benutzer', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(benutzerDaten)
    });
    
    const result = await response.json();
    return result;
  } catch (error) {
    console.error('Fehler beim Erstellen des Benutzers:', error);
  }
}

// Daten von API abrufen
async function benutzerLaden(id) {
  try {
    const response = await fetch(`/api/benutzer/${id}`);
    const benutzer = await response.json();
    return benutzer;
  } catch (error) {
    console.error('Fehler beim Laden des Benutzers:', error);
  }
}

---

## 🛡️ Fehlerbehandlung

### Try-Catch für JSON.parse()

function sicheresJSONParsing(jsonString) {
  try {
    const obj = JSON.parse(jsonString);
    return { success: true, data: obj };
  } catch (error) {
    console.error('JSON Parsing Fehler:', error.message);
    return { success: false, error: error.message };
  }
}

// Verwendung
const result = sicheresJSONParsing('{"invalid": json}');
if (result.success) {
  console.log('Daten:', result.data);
} else {
  console.log('Fehler:', result.error);
}

### Validierung vor dem Parsing

function istGültigesJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
}

// Verwendung
const jsonString = '{"name": "Test"}';
if (istGültigesJSON(jsonString)) {
  const obj = JSON.parse(jsonString);
  // Verarbeitung...
}

---

## ✅ Best Practices

### 1. Defensive Programmierung

// Immer prüfen, ob Daten existieren
const daten = JSON.parse(localStorage.getItem('benutzer') || '{}');
const name = daten.name || 'Unbekannt';

### 2. Datenvalidierung

function validiereBenutzer(benutzer) {
  const erforderlicheFelder = ['name', 'email'];
  
  for (const feld of erforderlicheFelder) {
    if (!benutzer[feld]) {
      throw new Error(`Erforderliches Feld fehlt: ${feld}`);
    }
  }
  
  return true;
}

### 3. Typsichere Konvertierung

function sicherZuJSON(obj) {
  // Undefined-Werte herausfiltern
  return JSON.stringify(obj, (key, value) => {
    return value === undefined ? null : value;
  });
}

### 4. Performance-Optimierung

// Für große Objekte: Streaming verwenden
function verarbeiteGroßesDatenset(data) {
  const chunkSize = 1000;
  const chunks = [];
  
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    chunks.push(JSON.stringify(chunk));
  }
  
  return chunks;
}

---

## ⚠️ Häufige Fallstricke

### 1. Zirkuläre Referenzen

// Problem
const obj = { name: "Test" };
obj.self = obj; // Zirkuläre Referenz

// JSON.stringify(obj); // TypeError: Converting circular structure to JSON

// Lösung
const objOhneZirkel = JSON.stringify(obj, (key, value) => {
  return key === 'self' ? undefined : value;
});

### 2. Datenverlust bei undefined/function

const obj = {
  name: "Test",
  value: undefined,    // Wird entfernt
  method: () => {},    // Wird entfernt
  date: new Date()     // Wird zu String
};

console.log(JSON.stringify(obj));
// '{"name":"Test","date":"2024-01-01T10:00:00.000Z"}'

### 3. Präzisionsverlust bei großen Zahlen

const großeZahl = 9007199254740992;
const json = JSON.stringify({ zahl: großeZahl });
const parsed = JSON.parse(json);

console.log(großeZahl === parsed.zahl); // false bei sehr großen Zahlen

### 4. Date-Objekte werden zu Strings

const obj = { datum: new Date() };
const json = JSON.stringify(obj);
const parsed = JSON.parse(json);

console.log(parsed.datum instanceof Date); // false
console.log(typeof parsed.datum); // "string"

// Lösung mit Reviver
const mitDatum = JSON.parse(json, (key, value) => {
  return key === 'datum' ? new Date(value) : value;
});

---

## 🔧 Erweiterte Techniken

### Custom toJSON() Methode

class Benutzer {
  constructor(name, email) {
    this.name = name;
    this.email = email;
    this.erstelltAm = new Date();
  }
  
  toJSON() {
    return {
      name: this.name,
      email: this.email,
      erstelltAm: this.erstelltAm.toISOString()
    };
  }
}

const benutzer = new Benutzer("Max", "[e-mail]");
console.log(JSON.stringify(benutzer));

### JSON Schema Validierung

// Einfache Schema-Validierung
function validiereMitSchema(obj, schema) {
  for (const [key, type] of Object.entries(schema)) {
    if (typeof obj[key] !== type) {
      throw new Error(`${key} sollte vom Typ ${type} sein`);
    }
  }
  return true;
}

const schema = {
  name: 'string',
  age: 'number',
  active: 'boolean'
};

const daten = { name: "Anna", age: 25, active: true };
validiereMitSchema(daten, schema); // OK

---

## 📚 Zusammenfassung

:::success
**Wichtige Erkenntnisse:**

1. **JSON ist ein universelles Datenformat** für den Austausch zwischen Systemen
2. **`JSON.stringify()`** konvertiert JS-Objekte zu JSON-Strings
3. **`JSON.parse()`** konvertiert JSON-Strings zu JS-Objekten
4. **Fehlerbehandlung ist essentiell** beim Arbeiten mit JSON
5. **Achten Sie auf Fallstricke** wie zirkuläre Referenzen und Datenverlust
6. **Validierung und defensive Programmierung** erhöhen die Robustheit
:::

JSON ist ein mächtiges Werkzeug in der modernen Webentwicklung. Mit den richtigen Techniken und der Beachtung der Best Practices können Sie sicher und effizient mit JSON-Daten arbeiten.

---

*Diese Dokumentation wurde für HackMD optimiert und bietet eine umfassende Einführung in JSON mit JavaScript.*