Visualizador de Rutas JSON

¿Qué es una ruta JSON?

Una ruta JSON es una cadena corta que señala un valor exacto dentro de un documento JSON anidado — de la misma forma en que una ruta de archivo señala un archivo dentro de carpetas. En vez de contar corchetes y comillas a mano para escribir data.users[0]["user-id"], esta herramienta muestra tu JSON como un árbol clicable: hacé clic en cualquier valor y te da la ruta lista para pegar, tanto en notación de corchetes JS como en la sintaxis estándar JSONPath (RFC 9535).

Cómo usar el Visualizador de Rutas JSON

1. Pegá tu JSON en el panel Entrada, o hacé clic en Pegar / Ejemplo.
2. Explorá el árbol resultante, usando Expandir todo / Colapsar todo cuando lo necesites.
3. Hacé clic en cualquier clave o valor del árbol para generar su ruta.
4. Copiá la cadena en notación de corchetes JS o JSONPath con el ícono de copiar de al lado.

Cómo funciona la generación de rutas JSON

Cada nodo del árbol lleva la lista de claves e índices de arreglo ("segmentos") necesarios para llegar a él desde la raíz, recolectada mientras se construye el árbol. Al hacer clic en un nodo, o en su pequeño ícono de copiar, esa lista de segmentos se convierte en una ruta lista para pegar en dos notaciones convencionales:

// Dado
{
  "users": [
    { "full name": "Ada Lovelace", "user-id": "u-001" }
  ]
}

// Al hacer clic en "user-id" del primer usuario se genera:
Corchetes / JS:  data.users[0]["user-id"]
JSONPath:        $.users[0]['user-id']

Ambas cadenas se construyen a partir del mismo arreglo de segmentos subyacente mediante dos funciones de renderizado pequeñas e independientes, cada una con sus propias reglas de nombre — una clave se convierte en .clave cuando es un identificador válido de JavaScript para el lado corchetes/JS, o cuando cumple el member-name-shorthand del RFC 9535 para el lado JSONPath (muy parecido, pero el RFC 9535 no permite $ en un nombre sin comillas como sí lo permiten los identificadores de JS — una clave como "$ref" se renderiza como ['$ref'] en JSONPath, nunca como notación de punto inválida). Cualquier cosa fuera de esas reglas — un espacio, un guion, un dígito inicial — cae en ["clave"] / ['clave'], así que la ruta generada siempre funciona al pegarla en código real, una librería JSONPath, o una expresión jq. Los elementos de arreglo siempre usan notación de corchetes con índice, por ej. [0], sin importar el estilo de las claves alrededor.

El buscador filtra el árbol por nombre de clave o, al cambiar a "Valores", por el contenido real del valor — útil para encontrar qué nodo contiene un valor específico antes de copiar su ruta.

Preguntas frecuentes

¿Cuál es la diferencia entre los dos formatos de ruta?

La notación de corchetes/punto (por ej. data.users[0].zip) coincide con cómo accederías al valor directamente en JavaScript. JSONPath (por ej. $.users[0].zip) es la notación estándar definida en el RFC 9535, usada por librerías JSONPath, herramientas al estilo jq y testers de consultas JSON.

¿Cómo copio una ruta?

Hacé clic en cualquier nodo del árbol, o en su pequeño ícono de copiar, para copiar su ruta en notación de corchetes al instante. Al seleccionar un nodo también se muestran ambas notaciones en la barra de ruta arriba del árbol, cada una con su propio botón de copiar.

¿Qué pasa con las claves que no son identificadores válidos de JavaScript?

Las claves con espacios, guiones, o que empiezan con un dígito se envuelven automáticamente en notación de corchetes con comillas, por ejemplo data["user-id"] en vez del inválido data.user-id. El lado JSONPath aplica las reglas de nombre propias (algo más estrictas) del RFC 9535 — por ejemplo una clave como "$ref" es válida en notación de punto de JS pero no en la notación sin comillas de JSONPath, así que ahí se renderiza como $['$ref'].

¿Es seguro pegar datos sensibles en esta herramienta?

Sí. Todo el análisis y renderizado ocurre en tu navegador con JavaScript nativo; ningún dato se envía a un servidor.