JSON-Diff

Zwei JSON-Dokumente mit bloßem Auge zu vergleichen, wird unzuverlässig, sobald sie mehr als ein paar Zeilen umfassen: Umsortierte Schlüssel und unterschiedliche Einrückung verbergen die Änderungen, auf die es ankommt. Dieses Tool parst beide Seiten, durchläuft sie rekursiv und meldet nur echte Unterschiede – jeweils mit einem Pfad.

So funktioniert der Vergleich

Beide Eingaben werden mit JSON.parse geparst. Die oberste Ebene muss jeweils ein Objekt sein; Arrays und primitive Werte an der Wurzel werden abgelehnt. Danach bildet das Tool auf jeder Ebene die Vereinigung der Schlüssel und läuft sie durch.

• Ist ein Schlüssel auf beiden Seiten vorhanden und sind beide Werte einfache Objekte, wird in das Objekt hineinrekursiert, statt es als Blatt zu behandeln.
• Alles andere – primitive Werte, Arrays, null und jeder nur auf einer Seite vorhandene Schlüssel – wird als Blatt mit tiefer Gleichheit verglichen.
• Fehlende Schlüssel werden als undefined geführt: ein Schlüssel nur links ist entfernt, ein Schlüssel nur rechts ist hinzugefügt, ein Schlüssel auf beiden Seiten mit ungleichen Werten ist geändert.
• Pfade werden mit Punkten verbunden, ein verschachtelter Schlüssel wird also zu address.city.
• Zum Schluss werden alle Einträge alphabetisch nach Pfad sortiert und vier Zähler erzeugt.

Weil in Arrays nie hineinrekursiert wird, behandelt das Tool ein ganzes Array als einen Wert. Zwei Arrays sind nur dann gleich, wenn ihre Längen übereinstimmen und jedes Element tief gleich ist.

Verwendung

1. Original-JSON einfügen – fügen Sie das Ausgangs-JSON in den linken Editor ein. Die Seite ist mit einem kleinen Beispiel vorbelegt, damit Sie das Verhalten sofort sehen.
2. Geändertes JSON einfügen – fügen Sie die zweite Fassung in den rechten Editor ein.
3. Vergleichen klicken. Vor dem Klick läuft nichts.
4. Ergebnisse lesen. Grün bedeutet hinzugefügt, Rot entfernt, Gelb geändert und Grau unverändert. Geänderte Einträge zeigen den alten Wert durchgestrichen, gefolgt vom neuen Wert.

Ungültiges JSON auf einer der Seiten erzeugt einen Parserfehler, der die betroffene Seite nennt – ein überzähliges Komma oder ein fehlendes Anführungszeichen ist damit schnell zu finden.

Praxisbeispiel: Eine API-Antwort

Nehmen Sie die beiden Beispielobjekte, mit denen die Seite startet.

Links:

{
  "name": "Alice",
  "age": 30,
  "email": "alice@example.com",
  "address": { "city": "New York", "zip": "10001" }
}

Rechts:

{
  "name": "Alice",
  "age": 31,
  "email": "alice@newdomain.com",
  "address": { "city": "Brooklyn", "zip": "10001" },
  "phone": "+1234567890"
}

Das Tool rekursiert in address und meldet die folgenden, nach Pfad sortierten Einträge:

Pfad	Typ	Detail
address.city	geändert	New York → Brooklyn
address.zip	unverändert	10001
age	geändert	30 → 31
email	geändert	alice@example.com → alice@newdomain.com
name	unverändert	Alice
phone	hinzugefügt	+1234567890

Die Zusammenfassung lautet 1 hinzugefügt, 0 entfernt, 3 geändert und 2 unverändert. Beachten Sie, dass address selbst nicht als Änderung auftaucht – nur sein geändertes Kind, was die Ausgabe auf das konzentriert, was sich tatsächlich unterscheidet.

Was gemeldet und was übersprungen wird

Situation	Gemeldet als
Schlüssel nur rechts	hinzugefügt
Schlüssel nur links	entfernt
Gleicher Schlüssel, anderer primitiver Wert	geändert
Gleicher Schlüssel, anderer Typ (Objekt gegen Zeichenkette)	geändert, beide Werte sichtbar
Gleicher Schlüssel, tief gleiche Werte	unverändert
Array mit anderer Länge oder anderem Element	geändert (das ganze Array)
Array mit identischen Elementen in gleicher Reihenfolge	unverändert
Schlüssel in anderer Reihenfolge	kein Unterschied
Neu eingerückte Eingabe	kein Unterschied

Die letzten beiden Zeilen sind der Grund, für JSON einen strukturellen Diff statt eines Text-Diffs zu verwenden: Formatierungsrauschen verschwindet.

Warum nicht einfach ein Text-Diff?

Ein zeilenbasierter Text-Diff vergleicht Zeichen und meldet daher eine Änderung, sobald ein Schlüssel wandert oder sich die Einrückung verschiebt. JSON hat keine bedeutungstragende Schlüsselreihenfolge, und Pretty-Printer ändern Leerraum nach Belieben, sodass ein Text-Diff zweier semantisch identischer Dokumente die ganze Datei aufleuchten lässt. Dieses Tool parst zuerst und vergleicht Werte, wodurch dieses Rauschen entfällt. Bei Arrays geht es den umgekehrten Kompromiss ein: Ein Text-Diff kann zeigen, welche Zeilen eingefügt wurden, während dieses Tool das gesamte Array als einen geänderten Wert meldet. Nutzen Sie den JSON-Diff, wenn Struktur zählt, und einen Text-Diff, wenn die exakten Zeichenänderungen zählen.

Wenn Arrays nicht ausreichen

Weil Arrays alles-oder-nichts sind, wird das Einfügen eines Elements am Anfang eines großen Arrays als einzelner geändert-Eintrag mit dem gesamten alten und neuen Array gemeldet. Das Tool sagt Ihnen nicht, dass items[0] eingefügt wurde oder dass sich items[3].id geändert hat. Für kleine Arrays ist das in Ordnung, und es vermeidet mehrdeutige Zuordnungen, wenn Elemente keine stabile Identität haben. Wenn Sie einen Vergleich auf Elementebene brauchen, normalisieren Sie die Daten zuerst – wandeln Sie das Array etwa in ein nach id verschlüsseltes Objekt um – und vergleichen Sie dann die normalisierte Form.

Ausgabe und Zähler lesen

Die vier Zähler enthalten auch unveränderte Blätter und summieren sich daher auf die Gesamtzahl der verglichenen Blätter, nicht auf die Zahl der Unterschiede. Ein Diff ohne Unterschiede zeigt eine kurze Meldung „keine Unterschiede“ und blendet dennoch alle vier Zähler ein. Weil unveränderte Einträge in der Liste stehen, kann ein großes Objekt selbst dann ein langes Ergebnis liefern, wenn sich nur ein Wert bewegt hat; scannen Sie nach den farbigen Markierungen für hinzugefügt, entfernt und geändert, wenn Sie nur an den Bewegungen interessiert sind. Alles wird lokal im Browser verarbeitet, API-Antworten und Konfigurationsdateien werden also nie übertragen.

Verwandte Tools

• JSON-Formatierer — Rohe JSON-Strings validieren, formatieren und in lesbare, eingerückte Strukturen verschönern.
• Diff-Checker — Zwei Textblöcke nebeneinander mit hervorgehobenen Unterschieden vergleichen.
• JSON zu CSV — JSON-Arrays in kommagetrennte Werte für die Tabellenkalkulationsanalyse umwandeln.
• YAML-zu-JSON-Konverter — Zwischen den Formaten YAML und JSON konvertieren.