# JSON Editor — Beispiele

> Praxisnahe Durchläufe mit dem JSON Editor: verschachteltes JSON formatieren, Kaputtes reparieren, in der Tabelle durchsehen, minifizieren, transformieren.

Source: https://www.jpkc.com/db/tools/json/examples/

Zurück zur Übersicht: [JSON Editor](https://www.jpkc.com/db/tools/json/) · Tool live öffnen: [www.jpkc.com/tools/json/](https://www.jpkc.com/tools/json/)

Das [Manual](https://www.jpkc.com/db/tools/json/manual/) erklärt jede Funktion und Ansicht im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe**: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch — Button- und Ansichts-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung.

## Beispiel 1: Verschachteltes JSON lesbar formatieren

Der Klassiker — du hast eine API-Antwort in einer einzigen, endlosen Zeile und willst sehen, was drinsteht.

1. Öffne den [JSON Editor](https://www.jpkc.com/tools/json/) und wechsle in die **Text**-Ansicht.
2. Füge das kompakte JSON ein — etwa so:

```json
{"user":{"id":42,"name":"Ada","roles":["admin","editor"]},"active":true}
```

3. Klick auf **Format**. Der Editor rückt alles sauber mit zwei Leerzeichen ein:

```json
{
  "user": {
    "id": 42,
    "name": "Ada",
    "roles": [
      "admin",
      "editor"
    ]
  },
  "active": true
}
```

4. Für den Überblick über tiefe Strukturen wechsle in die **Tree**-Ansicht und klapp die Knoten auf und zu. So findest du dich auch in großen Antworten schnell zurecht.

## Beispiel 2: Kaputtes JSON validieren und reparieren

Du hast JSON aus einem Log oder einer Config kopiert, und irgendetwas stimmt nicht.

1. Füge den Schnipsel in die **Text**-Ansicht ein, zum Beispiel mit gleich mehreren typischen Fehlern:

```json
{
  name: 'Ada',
  roles: ['admin', 'editor',],
}
```

Hier sind die Schlüssel nicht in Anführungszeichen, es stehen einfache statt doppelter Anführungszeichen, und es gibt ein abschließendes Komma. Der Editor markiert die Fehlerstelle sofort — die **Echtzeit-Validierung** sagt dir, *wo* es klemmt.

2. Der Editor meldet das JSON als ungültig und bietet in der **Text**-Ansicht eine **Auto-Reparatur** an. Nimm sie an — die drei Fehler werden automatisch behoben:

```json
{
  "name": "Ada",
  "roles": [
    "admin",
    "editor"
  ]
}
```

3. Bleibt nach der Reparatur noch ein Fehler stehen (bei fundamental mehrdeutigen Eingaben), zeigt die Meldung die Ursache. Korrigier die Stelle dann in der **Text**-Ansicht von Hand und prüf erneut — die Validierung wird grün, sobald das JSON wohlgeformt ist.

Wichtig: Das ist eine **Syntax**-Reparatur. Ob deine Felder inhaltlich stimmen (richtige Typen, geforderte Schlüssel), prüft der Editor nicht — dafür bräuchtest du ein JSON-Schema.

## Beispiel 3: Eine Liste von Objekten in der Tabelle durchsehen

API-Antworten sind oft Arrays gleichförmiger Objekte. Die liest man am besten als Tabelle.

1. Lade oder füge ein Array von Objekten ein:

```json
[
  { "id": 1, "name": "Ada", "active": true },
  { "id": 2, "name": "Linus", "active": false },
  { "id": 3, "name": "Grace", "active": true }
]
```

2. Wechsle in die **Table**-Ansicht. Aus den Feldern `id`, `name` und `active` werden Spalten, jeder Eintrag wird eine Zeile — wie in einer Tabellenkalkulation.
3. **Sortier per Klick** auf eine Spaltenüberschrift (z. B. nach `name`), bearbeite Werte direkt in den Zellen und füge bei Bedarf Zeilen hinzu oder entferne sie.
4. Brauchst du das Ergebnis wieder als Datei, klick auf **Download** — du bekommst ein formatiertes `data.json`.

Tipp: Ist die Struktur stark verschachtelt oder uneinheitlich, ist die Tabelle weniger hilfreich. Dann bleib in der **Tree**-Ansicht.

## Beispiel 4: JSON für die Auslieferung minifizieren

Für eine Konfiguration, ein Daten-Attribut oder eine kompakte Übertragung willst du das Gegenteil von „lesbar": so klein wie möglich.

1. Füge dein formatiertes JSON ein (oder formatiere es erst mit **Format**).
2. Klick auf **Compact**. Der Editor entfernt alle überflüssigen Leerzeichen und Zeilenumbrüche und presst alles in eine einzige Zeile:

```json
{"user":{"id":42,"name":"Ada","roles":["admin","editor"]},"active":true}
```

3. Mit **Copy** wandert das Ergebnis direkt in die Zwischenablage — bereit zum Einbetten.

Wenn du obendrein eine **stabile, reproduzierbare** Reihenfolge willst (z. B. um zwei Dateien zu vergleichen), klick vorher auf **Sort**: Das sortiert alle Schlüssel rekursiv alphabetisch, sodass dasselbe Objekt immer gleich aussieht.

## Beispiel 5: Mit Transform filtern, sortieren und Felder wählen

Du willst aus einer großen Liste nur einen Ausschnitt — ohne von Hand zu löschen.

1. Lade dein Array von Objekten (siehe Beispiel 3) und bleib in der **Tree**-Ansicht.
2. Öffne über das **Kontextmenü** (Rechtsklick) bzw. das Menü das **Transform**-Werkzeug.
3. Im Assistenten kannst du dreierlei kombinieren:
   - **filtern** — etwa nur Einträge mit `active = true`,
   - **sortieren** — z. B. nach `name` aufsteigend,
   - **Felder wählen** (Projektion) — nur `id` und `name` behalten.
4. Die **Live-Vorschau** zeigt das Ergebnis sofort. Stimmt es, wendest du die Transformation an.

Für wiederkehrende, komplexere Umbauten kannst du statt des Assistenten direkt eine **Abfrage** in der JavaScript-Abfragesprache schreiben. Zum schnellen Finden einer Stelle reicht oft schon die **Suche** in Tree- oder Text-Ansicht.

## Beispiel 6: Datei laden, Schlüssel sortieren, weiterarbeiten — und Stand sichern

Ein durchgehender Mini-Workflow vom Öffnen bis zum Speichern.

1. Klick auf **Open** und wähle eine `.json`-Datei von deiner Platte. Gültiges JSON landet sofort als Struktur im Editor; ist die Datei kaputt, wird sie als Rohtext geladen — dann hilft die Auto-Reparatur der **Text**-Ansicht (siehe Beispiel 2).
2. Klick auf **Sort**, um alle Schlüssel alphabetisch zu ordnen — gut für die Übersicht und für Vergleiche.
3. Arbeite in der passenden Ansicht weiter (Werte bearbeiten im Tree, Tabelle für Listen, Text für die Rohsicht). **Dein Stand wird dabei automatisch im Browser gespeichert** — ein versehentlicher Reload kostet dich nichts.
4. Bist du fertig, klick auf **Download** für ein formatiertes `data.json`. Arbeitest du an einem **geteilten Rechner** mit sensiblen Daten, drück danach **Clear** — das löscht auch den im Browser gespeicherten Stand.

---

Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/json/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/json/manual/) für jede Funktion im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/json/tips/) für die Feinheiten. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/json/).