JSON Editor — Beispiele

Zurück zur Übersicht: JSON Editor · Tool live öffnen: www.jpkc.com/tools/json/

Das 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 und wechsle in die Text-Ansicht.
2. Füge das kompakte JSON ein — etwa so:

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

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

{
  "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:

{
  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:

{
  "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:

[
  { "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:

{"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 zum großen Bild, das Manual für jede Funktion im Detail und die Tipps & Tricks für die Feinheiten. Ausprobieren kannst du alles direkt im Tool.