JPKCom DB

JSON Editor — Beispiele

Praxisnahe Durchläufe mit dem JSON Editor: formatieren, Kaputtes reparieren, gegen ein Schema prüfen, von einer URL laden, minifizieren, transformieren.

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}
  1. Klick auf Format (oder drück Ctrl+I). Der Editor rückt alles sauber mit zwei Leerzeichen ein:
json
{
  "user": {
    "id": 42,
    "name": "Ada",
    "roles": [
      "admin",
      "editor"
    ]
  },
  "active": true
}
  1. Für den Überblick über tiefe Strukturen wechsle über tree in der Menüleiste in die Baum-Ansicht und klapp die Knoten auf und zu. So findest du dich auch in großen Antworten schnell zurecht. Die Fußzeile verrät dir nebenbei, wie tief die Struktur verschachtelt ist und wie viele Objekte, Schlüssel und Werte sie hat.

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 abschließende Kommas. Der Editor markiert die Fehlerstelle sofort, und die Fußzeile nennt den Fehler mit Zeile und Spalte — die Echtzeit-Validierung sagt dir, wo es klemmt.

  1. Klick auf Repair in der Werkzeugleiste. Die Fehler werden in einem Schritt behoben; Zeilenumbrüche und Einrückung des Originals bleiben dabei stehen:
{
  "name": "Ada",
  "roles": ["admin", "editor"]
}

Alternativ bietet die Text-Ansicht bei einem Parse-Fehler selbst Auto repair an.

  1. Willst du das Ergebnis einheitlich eingerückt, klick danach auf Format. Gefällt dir die Reparatur nicht, nimmt Ctrl+Z sie zurück.
  2. Bleibt nach der Reparatur noch ein Fehler stehen (bei strukturell zerstörten Eingaben), meldet das Tool „Repaired, but: …" mit der Ursache. Korrigier die Stelle dann in der Text-Ansicht von Hand — 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üfst du mit einem JSON Schema — siehe Beispiel 7.

Beispiel 3: Eine Liste von Objekten in der Tabelle durchsehen

API-Antworten sind oft Arrays gleichförmiger Objekte. Die liest du 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 }
]
  1. Wechsle über table in der Menüleiste in die Tabellen-Ansicht. Aus den Feldern id, name und active werden Spalten, jeder Eintrag wird eine Zeile — wie in einer Tabellenkalkulation.
  2. 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.
  3. Brauchst du das Ergebnis wieder als Datei, wähl File → Download (Ctrl+S) — du bekommst eine formatierte JSON-Datei. Der Download trägt den Namen der zuletzt geladenen Quelle, etwa der geöffneten Datei; ohne eine solche heißt er data.json (Details im Manual).

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 schaltet in die Text-Ansicht, 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}
  1. Mit File → Copy wandert das Ergebnis direkt in die Zwischenablage — bereit zum Einbetten.

Willst du dein lesbar formatiertes Dokument behalten und nur eine kompakte Fassung mitnehmen, geht es auch ohne Umweg: File → Copy compact kopiert die minifizierte Fassung, File → Download compact (.min.json) speichert sie als <name>.min.json — der Editor-Inhalt bleibt dabei unverändert.

Wenn du obendrein eine stabile, reproduzierbare Reihenfolge willst (z. B. um zwei Dateien zu vergleichen), klick vorher auf Sort keys: Das sortiert alle Schlüssel rekursiv, 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), etwa in der Tree- oder Table-Ansicht.
  2. Öffne das Transform-Werkzeug über die Menüleiste des Editors oder das Kontextmenü (Rechtsklick).
  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.

Der Assistent schreibt dabei eine Abfrage in JSONQuery, die du im Dialog auch direkt anpassen kannst — praktisch für komplexere Umbauten. Und wie alles im Editor lässt sich auch eine Transformation mit Ctrl+Z zurücknehmen. 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. Wähl File → Open file… (Ctrl+O) und such eine .json-Datei von deiner Platte aus — oder zieh die Datei einfach auf die Editor-Karte. Gültiges JSON landet sofort in der aktuellen Ansicht im Editor; ist die Datei kaputt, öffnet sie sich in der Text-Ansicht — dann hilft Repair (siehe Beispiel 2).
  2. Klick auf Sort keys, um alle Schlüssel 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. Das Badge im Kartenkopf zeigt Saved locally; bei Dokumenten über 2 Millionen Zeichen steht dort Not saved — too large, dann sicherst du per Download.
  4. Bist du fertig, speichere mit File → Download (Ctrl+S). Die Datei trägt wieder den Namen, unter dem du sie geöffnet hast. Arbeitest du an einem geteilten Rechner mit sensiblen Daten, wähl danach File → Clear — der leere Stand überschreibt auch die im Browser gespeicherte Kopie.

Beispiel 7: Daten gegen ein JSON Schema prüfen

Die Syntax stimmt, aber passen die Daten auch zum vereinbarten Format? Das klärt ein JSON Schema. Am Beispiel-Dokument des Tools (File → Load example) lässt sich das direkt durchspielen.

  1. Ändere in der Produktliste den Preis des zweiten Eintrags auf den String "3,90" und lösch beim dritten Eintrag das Feld name.
  2. Klick auf Schema und füge dieses Schema in das Textfeld ein:
json
{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "required": ["shop", "products"],
  "properties": {
    "products": {
      "type": "array",
      "items": {
        "type": "object",
        "required": ["id", "name", "price"],
        "properties": {
          "id": { "type": "integer" },
          "name": { "type": "string" },
          "price": { "type": "number", "minimum": 0 }
        }
      }
    }
  }
}
  1. Klick auf Validate. Der Dialog meldet „2 problems — marked in the editor" und listet die Fundstellen:
/products/1/price: Instance type "string" is invalid. Expected "number".
/products/2: Instance does not have required property "name".
  1. Schließ den Dialog: Die beiden Stellen sind im Editor als Warnung markiert. Korrigierst du sie, verschwinden die Markierungen sofort — das Schema bleibt aktiv, das gelbe Badge Schema im Kartenkopf zeigt es an.
  2. Liegt das Schema als Datei vor, nimm statt des Textfelds Open schema file…. Brauchst du die Prüfung nicht mehr, schaltet Remove schema sie ab und löscht das Schema aus dem Browser-Speicher.

Beispiel 8: Eine API-Antwort direkt von der URL laden

Statt eine API-Antwort erst herunterzuladen und dann zu öffnen, holt der Editor sie selbst.

  1. Wähl File → Load from URL….
  2. Gib die Adresse ein, etwa den JSON-Feed dieser Wissensdatenbank: https://www.jpkc.com/db/feed.json, und klick auf Load.
  3. Die Antwort landet im Editor. Den Abruf übernimmt — als einzige Funktion des Tools — ein Proxy auf dem Server der Website. Geladen werden nur öffentliche Adressen bis 2 MB — APIs, die einen Token oder Login verlangen, funktionieren so nicht.
  4. Jetzt kannst du die Antwort wie jedes andere Dokument bearbeiten: in der Tree-Ansicht durchklicken, die Liste der Einträge in der Table-Ansicht durchsehen, mit Transform filtern. Ein Download heißt nach dem letzten Teil der URL, hier feed.json.

Hast du vorher an einem anderen Dokument gearbeitet: Ctrl+Z holt es zurück.

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.