Visualizador de Rutas JSON

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 — una clave se convierte en .clave cuando es un identificador válido de JavaScript, o en ["clave"] / ['clave'] cuando no lo es (contiene un espacio, un guion, empieza con un dígito, o tiene cualquier otro carácter fuera de /^[A-Za-z_$][A-Za-z0-9_$]*$/), 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 con prefijo $ 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.

¿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.