JSON-diff
Vergelijk twee JSON-documenten en zie precies welke velden zijn toegevoegd, verwijderd of gewijzigd
JSON A (links / voor)
JSON B (rechts / na)
JSON-diff
Vergelijk twee JSON-documenten en zie precies welke velden zijn toegevoegd, verwijderd of gewijzigd
Functies
- Structurele diff tussen twee JSON-waarden — objecten, arrays en primitieven worden correct doorlopen (null wordt als scalar behandeld, niet als object — de typeof-null-bug is opgelost)
- Elk verschil wordt gerapporteerd als een RFC 6901 JSON Pointer-pad (bv. `/users/0/email`) zodat je direct naar de exacte knoop in diep geneste data navigeert
- Gewijzigde regels tonen voor- ÉN na-waarden naast elkaar, dus duidelijk of 'active' van true→false ging of een getal veranderde
- Samenvattings-tellers: toegevoegd, verwijderd, gewijzigd en ongewijzigde bladeren — schaal van de diff in één oogopslag voordat je de pad-detail leest
- Per-kant parsefoutrapport noemt welke invoer faalde en bevat de JavaScript-engine's parsemelding — je hoeft niet te raden of A of B malformed is
- Knop Rapport kopiëren geeft de hele diff (gegroepeerde secties Toegevoegd / Verwijderd / Gewijzigd plus ongewijzigde teller) als platte tekst — plak in code review of commit-bericht
- Voorbeeld laden vult beide panelen met een klein realistisch voorbeeld (gebruikersrecord met rol- en adreswijzigingen) zodat nieuwe gebruikers de diff zonder typen zien werken
- Puur client-side: JSON A en JSON B worden in je browser geparseerd en vergeleken; niets wordt geüpload, en de tool werkt offline na het laden
Hoe te gebruiken
- Plak je 'voor'-JSON in het linker tekstvak (JSON A) en het 'na'-JSON rechts (JSON B).
- Klik Vergelijken. De diff wordt recursief berekend; objecten op sleutel, arrays op index.
- Lees de samenvattings-tellers: hoeveel sleutels toegevoegd, verwijderd, gewijzigd, en hoeveel bladeren overeenkomen.
- Scroll de pad-lijsten om te zien welke JSON Pointer-paden veranderden; gewijzigde regels tonen voor → na.
- Klik Rapport kopiëren om de hele diff als platte tekst te krijgen — handig voor reviewnotities, bugmeldingen of commit-berichten.
- Gebruik Voorbeeld laden om een werkend voorbeeld te zien voordat je eigen data plakt.
Tips en best practices
- Draai JSON Formatter eerst op beide kanten als je wilt dat een tekstdiff structureel-gelijke documenten ook als geen-wijziging toont.
- Voor grote arrays waar volgorde telt is deze tool precies juist; voor sets, voorsorteer op een stabiele sleutel.
- De paduitvoer is RFC 6901, dus je kunt het direct aan libs als fast-json-patch geven om wijzigingen programmatisch toe te passen.
- Plak het rapport in PR-beschrijvingen om reviewers exact te tonen wat veranderde in een config- of fixture-JSON.
- Als parsefouten op een specifieke kolom wijzen, bevat de engine-melding vaak regel/kolom uit json5-achtige parsers — hier gebruiken we strikte JSON.parse, dus regel/kolom komt van de host.
Veelgestelde vragen
Hoe worden arrays vergeleken — op index of op waarde?
Op index. Element 0 van A wordt met element 0 van B vergeleken, 1 met 1, enz. Als A langer is, worden de extra eind-indices als Verwijderd gerapporteerd; als B langer is, is de extra staart Toegevoegd. Snel en voorspelbaar, maar een invoeging aan het begin van een grote array cascadeert in veel 'gewijzigd'-regels. Voor volgorde-onafhankelijke vergelijkingen (sets unieke IDs) sorteer beide arrays eerst of preprocess naar objecten met sleutel op identifier.
Wat is de padnotatie in het resultaat?
RFC 6901 JSON Pointer: paden zijn slash-gescheiden tokens die in de JSON-boom afdalen. `/users/0/email` betekent 'de email-eigenschap van element 0 van users'. Sleutels met `~` worden geëscaped als `~0`, slashes als `~1`. De wortel zelf wordt als `/` getoond. Zelfde padnotatie als patch-tools, JSON Schema instancePath en json-formatter pointer-hover.
Hoe wordt null afgehandeld?
null wordt als bladwaarde behandeld, niet als object — ook al is typeof null === 'object' in JavaScript. Dus {a: null} vs {a: {}} verschijnt als gewijzigd in plaats van te recurseren in een leeg object. {a: null} vs {a: null} telt als één ongewijzigd blad, en {a: null} vs {a: 0} verschijnt als gewijzigd met voor=null na=0.
Verwerkt de diff sleutels met speciale tekens?
Ja. Sleutels met punten, slashes, haakjes of tildes worden JSON-Pointer-geëscaped in de paduitvoer — `~` wordt `~0`, `/` wordt `~1`. Dus een sleutel letterlijk genaamd `a/b` verschijnt als `/a~1b` in het pad, ondubbelzinnig omkeerbaar.
Waarom matcht het ongewijzigd-aantal niet mijn verwachting?
Ongewijzigd wordt op BLAD-niveau geteld — primitieven gelijk tussen A en B. Een diep genest object waarvan de subboom volledig identiek is, levert één ongewijzigd-regel per blad, niet één voor de hele subboom. Dat maakt de teller een echte sanity check: 'hoeveel primitieve waarden bleven gelijk'.
Wat als één kant null of leeg is?
Lege invoer parseert als null (dus `{a:1}` vs leeg vergelijkt tegen null en rapporteert het hele object als toegevoegd). Een letterlijke `null` is een geldig JSON-document; twee nulls vergelijken geeft nul toegevoegd/verwijderd/gewijzigd en één ongewijzigd. Als beide invoeren leeg zijn, rapporteert de diff overal triviaal nul.
Wordt mijn JSON ergens naartoe gestuurd?
Nee. Beide tekstvakken blijven in je browser; de diff draait in dezelfde JavaScript-context die de pagina renderde. Het Netwerk-tabblad in DevTools toont geen verzoeken bij klik op Vergelijken. De tool werkt offline na het cachen van de pagina.
Wat is het verschil met een tekst-regeldiff?
Een tekstdiff als `diff a.json b.json` werkt op tekens en regeleinden: herformatteer dezelfde data en hij licht op. Dit is een STRUCTURELE diff: `{"a":1, "b":2}` en `{"b":2, "a":1}` zijn identiek (nul diff). Geeft ook niet om inspringing, trailing whitespace of commentstijlen. Gebruik een tekstdiff als formatting telt; deze als data telt.