JSON-Diff

Was ist ein JSON-Diff?#

Ein JSON-Diff vergleicht zwei JSON-Dokumente und sagt Ihnen genau, was sich zwischen ihnen geändert hat — welche Felder hinzukamen, welche verschwanden und welche denselben Pfad behielten, aber einen anderen Wert annahmen. Es ist das strukturelle Äquivalent eines Text-Diffs, doch anstatt Zeilen abzugleichen, durchwandert es den Objekt- und Array-Baum, sodass eine Wertänderung von 1 auf 2 als präzise Änderung an einem bestimmten Pfad erscheint, nicht als ein umgeschriebener Textblock.

Das zählt immer dann, wenn JSON das Übertragungsformat für etwas ist, das sich weiterentwickelt: API-Antworten zwischen Deployments, Konfigurationsdateien zwischen Revisionen, Fixtures in einer Test-Suite, exportierte Daten zwischen Tagen. Zwei formatierte Blöcke nebeneinander zu betrachten, funktioniert nur bei winzigen Dokumenten; sobald die Schachtelung tief wird, brauchen Sie die Unterschiede aufgelistet.

Der Haken ist, dass JSON-Diff reihenfolgenempfindlich für Arrays ist. Zwei Arrays sind nur gleich, wenn ihre Elemente position um position übereinstimmen, weil JSON selbst Gleichheit so definiert. Also sind [a, b] und [b, a] verschieden, und das Diff wird das melden — nützlich, wenn die Reihenfolge bedeutsam ist (eine Folge von Schritten), überraschend, wenn nicht (eine Menge, die als Array getarnt ist).

Verwendung#

1. Fügen Sie das ursprüngliche Dokument in die Fläche Links (original) und das überarbeitete in die Fläche Rechts (geändert) ein.
2. Der Vergleich läuft live während der Eingabe. Sie können auch auf Vergleichen klicken, um eine Aktualisierung zu erzwingen.
3. Der Ausgabebereich listet jeden Unterschied in einer eigenen Zeile:
   • Hinzugefügt — der Pfad existiert nur rechts; die Zeile zeigt den neuen Wert.
   • Entfernt — der Pfad existiert nur links; die Zeile zeigt den alten Wert.
   • Geändert — der Pfad existiert auf beiden Seiten, aber mit einem abweichenden Wert; die Zeile zeigt alt → neu. Jede Zeile trägt einen Pfad im JSONPath-Stil als Präfix, etwa $.version oder $.tags[2], sodass Sie ihn in beiden Dokumenten finden.
4. Wenn beide Dokumente zutiefst gleich sind, sagt die Statuszeile das ausdrücklich — „keine Unterschiede“ —, anstatt Ihnen eine leere Fläche zur Deutung zu überlassen.
5. Beispiel lädt ein realistisches Vorher-/Nachher-Paar; Leeren setzt beide Flächen und das Ergebnis zurück.

Eckpunkte#

• Strukturell, nicht textuell. Vergleicht den geparsten Wertebaum, sodass erneutes Einrücken, das Umordnen von Objekt-Schlüsseln oder eine Whitespace-Änderung niemals einen falschen Unterschied erzeugen.
• Präzise Pfade. Jede Änderung trägt ihre Position in JSONPath-Notation — $ für die Wurzel, .key für Objektfelder, [i] für Array-Indizes —, sodass Sie direkt an die richtige Stelle springen können.
• Drei Änderungsarten. Hinzugefügt, entfernt und geändert werden getrennt und farblich kodiert gemeldet, sodass Ergänzungen auf einen Blick von Löschungen und Bearbeitungen zu unterscheiden sind.
• Pro-Seiten-Fehlermeldung. Wenn eine Eingabe kein gültiges JSON ist, nennt die Statuszeile die fehlerhafte Seite (Linke Eingabe ist kein gültiges JSON.), statt undurchsichtig zu scheitern.
• Live-Vergleich. Das Diff aktualisiert sich bei der Bearbeitung beider Flächen, sodass das Iterieren auf einem Fixture oder einer Antwort unmittelbar ist.

Konkretes Beispiel#

Laden Sie Beispiel und die beiden Flächen füllen sich mit einem kleinen Konfigurationsdokument vor und nach einer Revision:

{
  "name": "ArpGate",
  "version": 1,
  "tags": ["json", "encoding"],
  "features": { "static": true, "backend": null }
}

links, gegen:

{
  "name": "ArpGate",
  "version": 2,
  "tags": ["json", "encoding", "crypto"],
  "features": { "static": true, "backend": false, "offline": true }
}

rechts. Das Diff zählt genau auf, was sich verschoben hat:

changed  $.version           1 → 2
added    $.tags[2]           "crypto"
changed  $.features.backend  null → false
added    $.features.offline  true

Beachten Sie, was nicht auftaucht: $.name (unverändert), $.tags[0] und $.tags[1] (unverändert) sowie $.features.static (unverändert). Gleiche Äste erzeugen keine Ausgabe, sodass ein vierzeiliges Diff die ganze Geschichte ist, obwohl beide Dokumente mehrere Felder haben. Setzen Sie danach beide Flächen auf dasselbe Dokument, so wechselt die Statuszeile zu „keine Unterschiede — Eingaben sind identisch“.

FAQ#

Warum erscheint ein umgeordnetes Array als vollständig geändert?#

JSON-Arrays sind geordnet, und Gleichheit ist positional. [1, 2] und [2, 1] unterscheiden sich an Index 0 und Index 1, deshalb meldet das Diff zwei Änderungen. Das ist korrekt für Folgen, bei denen die Reihenfolge bedeutsam ist. Wenn Ihr Array eine Menge darstellt, sortieren Sie es (oder normalisieren Sie es) in beiden Dokumenten vor dem Vergleichen — sonst erscheinen Verschiebungen als Änderungen.

Merkt es, wenn ein Objekt-Schlüssel umbenannt wird?#

Es meldet das als eine Entfernung plus eine Ergänzung, weil JSON keine Möglichkeit hat auszudrücken: „dieser Schlüssel wurde jener“. Ein Umbenennen von enabled zu active taucht als removed $.enabled und added $.active auf — zwei Zeilen, nicht ein einziges „Rename“. Das ist die ehrliche Darstellung dessen, was sich in den Daten geändert hat.

Wie sieht eine Typänderung aus?#

Sie wird als einzige changed-Zeile gemeldet. Wenn ein Wert vom String "36" zur Zahl 36 wechselt, zeigt das Diff an diesem Pfad "36" → 36 — die unterschiedlichen Serialisierungen machen den Typwechsel sichtbar. Dasselbe gilt für null, das zu false wird, oder für eine Zahl, die zu einem Objekt wird.

Kann es mir sagen, welche Felder unverändert sind?#

Nein, und absichtlich nicht. Jedes unveränderte Feld aufzulisten würde die eigentlichen Änderungen in Rauschen ertränken, bei jedem echten Dokument. Das Diff zeigt nur die Deltas; gleiche Äste schweigen. Wenn Sie die vollständige Form eines Dokuments brauchen, stellen Sie es mit der Baumansicht dar.