Comparador JSON

¿Qué es un comparador de JSON?#

Un comparador de JSON coteja dos documentos JSON y te dice exactamente qué cambió entre ellos: qué campos aparecieron, cuáles desaparecieron y cuáles mantuvieron la misma ruta pero tomaron un valor distinto. Es el equivalente estructural de un diff de texto, pero en lugar de emparejar líneas recorre el árbol de objetos y arrays, de modo que un valor que pasa de 1 a 2 se refleja como una edición precisa en una ruta concreta, no como un bloque de texto reescrito.

Esto importa siempre que JSON es el formato de transmisión de algo que evoluciona: respuestas de API entre despliegues, archivos de configuración entre revisiones, fixtures de una suite de tests, datos exportados entre días. Mirar dos bloques embellecidos uno al lado del otro solo funciona con documentos diminutos; en cuanto el anidamiento se profundiza, necesitas que las diferencias se enumeren.

El inconveniente es que el diff de JSON es sensible al orden en los arrays. Dos arrays solo son iguales si sus elementos coinciden posición por posición, porque así es como el propio JSON define la igualdad. Por tanto [a, b] y [b, a] son distintos, y el diff lo reflejará: útil cuando el orden es significativo (una secuencia de pasos), sorprendente cuando no lo es (un conjunto disfrazado de array).

Cómo usarlo#

1. Pega el documento original en el panel Izquierda (original) y el revisado en el panel Derecha (cambiado).
2. La comparación se ejecuta en vivo mientras escribes. También puedes pulsar Comparar para forzar el refresco.
3. El área de salida enumera cada diferencia en su propia fila:
   • Añadido: la ruta existe solo a la derecha; la fila muestra el valor nuevo.
   • Eliminado: la ruta existe solo a la izquierda; la fila muestra el valor antiguo.
   • Cambiado: la ruta existe en ambos lados pero con un valor distinto; la fila muestra antiguo → nuevo. Cada fila va precedida de una ruta estilo JSONPath como $.version o $.tags[2], para que puedas localizarla en cualquiera de los dos documentos.
4. Si ambos documentos son profundamente iguales, la línea de estado lo indica de forma explícita —«sin diferencias»— en lugar de dejarte un panel vacío que interpretar.
5. Ejemplo carga un par antes/después realista; Limpiar vacía ambos paneles y el resultado.

Características principales#

• Estructural, no textual. Compara el árbol de valores analizado, de modo que resangrar, reordenar las claves de los objetos o cambiar los espacios en blanco nunca produce una diferencia falsa.
• Rutas precisas. Cada cambio lleva su ubicación en notación JSONPath —$ para la raíz, .clave para los campos de objeto, [i] para los índices de array— para que vayas directo al punto correcto.
• Tres tipos de cambio. Añadido, eliminado y cambiado se reportan por separado y con su propio color, así las adiciones se distinguen de las eliminaciones y de las ediciones de un vistazo.
• Reporte de errores por lado. Si una entrada no es JSON válido, la línea de estado indica qué lado falló (La entrada izquierda no es JSON válido.) en lugar de fallar de forma opaca.
• Comparación en vivo. El diff se actualiza al editar cualquiera de los paneles, así que iterar sobre un fixture o una respuesta es inmediato.

Ejemplo detallado#

Carga Ejemplo y los dos paneles se rellenan con un pequeño documento de configuración antes y después de una revisión:

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

a la izquierda, frente a:

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

a la derecha. El diff enumera exactamente qué se movió:

cambiado  $.version           1 → 2
añadido   $.tags[2]           "crypto"
cambiado  $.features.backend  null → false
añadido   $.features.offline  true

Fíjate en lo que no aparece: $.name (sin cambios), $.tags[0] y $.tags[1] (sin cambios) y $.features.static (sin cambios). Las ramas iguales no producen salida, así que un diff de cuatro líneas es la historia completa aunque ambos documentos tengan varios campos. Si después pones los dos paneles con el mismo documento, la línea de estado cambia a «sin diferencias — las entradas son idénticas».

Preguntas frecuentes#

¿Por qué un array reordenado se muestra como totalmente cambiado?#

Los arrays de JSON son ordenados y la igualdad es posicional. [1, 2] y [2, 1] difieren en el índice 0 y en el índice 1, así que el diff reporta dos cambios. Es correcto para secuencias donde el orden importa. Si tu array representa un conjunto, ordénalo (o normalízalo) en ambos documentos antes de comparar; de lo contrario, los movimientos parecerán ediciones.

¿Detecta cuándo se renombra una clave de un objeto?#

Lo reporta como una eliminación más una adición, porque JSON no tiene forma de expresar «esta clave se convirtió en aquella». Renombrar enabled a active aparece como eliminado $.enabled y añadido $.active: dos filas, no un único «cambio de nombre». Es la representación honesta de lo que cambió en los datos.

¿Qué aspecto tiene un cambio de tipo?#

Se reporta como una única fila cambiado. Si un valor pasa de la cadena "36" al número 36, el diff muestra "36" → 36 en esa ruta: las serializaciones distintas hacen visible el cambio de tipo. Lo mismo se aplica a null que pasa a false, o a un número que se convierte en un objeto.

¿Puede decirme qué campos no cambiaron?#

No, y a propósito. Enumerar cada campo sin cambiar ahogaría los cambios reales en ruido en cualquier documento real. El diff muestra solo los deltas; las ramas iguales permanecen en silencio. Si necesitas la forma completa de un documento, reréscala con el visor de árbol.