Comparateur JSON

Qu’est-ce qu’un comparateur JSON ?#

Un comparateur JSON met côte à côte deux documents et vous dit exactement ce qui a changé entre eux — quels champs sont apparus, quels champs ont disparu, et quels champs ont conservé le même chemin mais une valeur différente. C’est l’équivalent structurel d’un diff textuel, mais au lieu de faire correspondre des lignes, il parcourt l’arborescence des objets et des tableaux : une valeur qui passe de 1 à 2 apparaît comme une modification précise à un chemin donné, et non comme un bloc de texte réécrit.

Cela compte chaque fois que JSON est le format de transmission de quelque chose qui évolue : réponses d’API entre mises en production, fichiers de configuration entre révisions, jeux de tests, données exportées entre deux jours. Comparer visuellement deux blocs mis en forme ne fonctionne que pour de tout petits documents ; dès que l’imbrication s’approfondit, il faut énumérer les différences.

La nuance à garder en tête est que le comparateur JSON est sensible à l’ordre des tableaux. Deux tableaux sont égaux uniquement si leurs éléments correspondent position par position, parce que c’est ainsi que le JSON lui-même définit l’égalité. Donc [a, b] et [b, a] sont différents, et le comparateur le signalera — utile quand l’ordre a un sens (une suite d’étapes), surprenant quand il n’en a pas (un ensemble déguisé en tableau).

Mode d’emploi#

1. Collez le document original dans le panneau Gauche (original) et le document révisé dans le panneau Droite (modifié).
2. La comparaison s’exécute en direct au fil de la frappe. Vous pouvez aussi cliquer sur Comparer pour forcer une actualisation.
3. La zone de sortie liste chaque différence sur sa propre ligne :
   • Ajouté — le chemin n’existe qu’à droite ; la ligne affiche la nouvelle valeur.
   • Supprimé — le chemin n’existe qu’à gauche ; la ligne affiche l’ancienne valeur.
   • Modifié — le chemin existe des deux côtés mais avec une valeur différente ; la ligne affiche ancien → nouveau. Chaque ligne est préfixée d’un chemin façon JSONPath comme $.version ou $.tags[2], afin que vous puissiez la localiser dans l’un ou l’autre document.
4. Si les deux documents sont profondément égaux, la ligne d’état l’indique explicitement — « aucune différence » — plutôt que de vous laisser interpréter un panneau vide.
5. Exemple charge une paire avant/après réaliste ; Effacer réinitialise les deux panneaux et le résultat.

Principales fonctionnalités#

• Structurel, pas textuel. Compare l’arborescence des valeurs analysées, donc réindenter, réordonner les clés d’objet ou modifier les espaces ne produit jamais de fausse différence.
• Chemins précis. Chaque changement porte sa localisation en notation JSONPath — $ pour la racine, .key pour les champs d’objet, [i] pour les indices de tableau — afin que vous puillez directement au bon endroit.
• Trois types de changements. Ajouté, supprimé et modifié sont rapportés séparément et codés par couleur, de sorte que les ajouts se distinguent des suppressions et des modifications au premier coup d’œil.
• Signalement des erreurs par côté. Si une entrée n’est pas du JSON valide, la ligne d’état nomme le côté fautif (L'entrée de gauche n'est pas du JSON valide.) au lieu d’échouer de façon opaque.
• Comparaison en direct. Le comparateur se met à jour quand vous modifiez l’un ou l’autre panneau, ce qui rend l’itération sur un jeu de tests ou une réponse immédiate.

Exemple détaillé#

Chargez Exemple et les deux panneaux se remplissent avec un petit document de configuration avant et après une révision :

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

à gauche, contre :

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

à droite. Le comparateur énumère exactement ce qui a bougé :

modifié  $.version           1 → 2
ajouté   $.tags[2]           "crypto"
modifié  $.features.backend  null → false
ajouté   $.features.offline  true

Notez ce qui n’apparaît pas : $.name (inchangé), $.tags[0] et $.tags[1] (inchangés), et $.features.static (inchangé). Les branches égales ne produisent aucune sortie, donc un comparateur de quatre lignes raconte toute l’histoire alors que les deux documents ont plusieurs champs. Si vous mettez ensuite les deux panneaux au même document, la ligne d’état passe à « aucune différence — les entrées sont identiques ».

FAQ#

Pourquoi un tableau réordonné apparaît-il comme entièrement modifié ?#

Les tableaux JSON sont ordonnés, et l’égalité est positionnelle. [1, 2] et [2, 1] diffèrent à l’indice 0 et à l’indice 1, donc le comparateur signale deux changements. C’est correct pour des séquences où l’ordre a un sens. Si votre tableau représente un ensemble, triez-le (ou normalisez-le) dans les deux documents avant de comparer — sinon les déplacements ressembleront à des modifications.

Détecte-t-il quand une clé d’objet est renommée ?#

Il le rapporte comme une suppression plus un ajout, parce que le JSON n’a aucun moyen d’exprimer « cette clé est devenue cette clé ». Renommer enabled en active apparaît comme supprimé $.enabled et ajouté $.active — deux lignes, pas un « renommage ». C’est la représentation honnête de ce qui a changé dans les données.

À quoi ressemble un changement de type ?#

Il est rapporté comme une seule ligne modifié. Si une valeur passe de la chaîne "36" au nombre 36, le comparateur affiche "36" → 36 à ce chemin — les sérialisations différentes rendent le changement de type visible. Il en va de même pour null qui devient false, ou un nombre qui devient un objet.

Peut-il me dire quels champs sont inchangés ?#

Non, et c’est délibéré. Lister chaque champ inchangé noierait les changements réels sous le bruit, quel que soit le document. Le comparateur n’affiche que les deltas ; les branches égales restent muettes. Si vous avez besoin de la forme complète d’un document, affichez-le avec la visionneuse d’arborescence.