Visor de JSON en árbol
Pega un JSON y recórrelo como un árbol en lugar de perderte entre llaves. Abre y cierra objetos y arrays, busca una clave o un valor y haz clic en un nodo para obtener su ruta JavaScript (como $.orders[0].sku), su JSON Pointer y su valor.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Pega el JSON en el cuadro. El árbol aparece al instante; si hay un error de sintaxis, verás la línea y la columna.
- Pulsa ▸ y ▾ para abrir y cerrar objetos y arrays, o usa Expandir todo y Contraer todo.
- Escribe en el buscador para marcar todas las claves o valores que contienen el texto.
- Haz clic en un nodo para ver su ruta JavaScript, su JSON Pointer y su valor, cada uno con su botón de copiar.
Cómo funciona
Cada línea del árbol es un nodo: su clave (o su índice en un array) y su valor. Los objetos muestran cuántas claves tienen y los arrays cuántos elementos, así ves el tamaño de una rama antes de abrirla. Las cadenas aparecen con comillas, como en JSON.
La ruta se construye con las claves desde la raíz. Una clave que es un nombre válido en JavaScript se escribe con punto (.customer); cualquier otra va entre corchetes y comillas ([“first-name”]), y los elementos de un array usan su índice ([0]).
Ejemplo
En el pedido de ejemplo, abre items, luego el primer elemento y haz clic en sku. La herramienta muestra:
- ruta JavaScript:
$.items[0].sku
- JSON Pointer:
/items/0/sku
- valor:
"A-1"
Si buscas true se marca customer.vip, y si buscas regalo, el primer elemento de tags.
Consejos
- Usa el JSON Pointer en operaciones de JSON Patch y en $ref de JSON Schema; la ruta JavaScript, en el código o en herramientas tipo JSONPath.
- Para ordenar los datos, dales formato con el formateador de JSON o aplánalos con el aplanador de JSON.
- Contrae todo y abre solo la rama que te interesa: los arrays largos se leen mejor así.
Preguntas frecuentes
¿Qué diferencia hay entre la ruta JavaScript y el JSON Pointer?
La ruta JavaScript es lo que escribes en el código: $.items[0].sku, con las claves que no son nombres simples entre corchetes, como $["first-name"]. El JSON Pointer (RFC 6901) es la cadena estándar de JSON Patch y JSON Schema: /items/0/sku, donde ~ en una clave se escribe ~0 y / se escribe ~1. El puntero de la raíz es una cadena vacía.
¿Dónde busca la búsqueda?
En las claves y en los valores de cadenas, números, true, false y null, sin distinguir mayúsculas y minúsculas. Cada coincidencia se marca con un borde y sus nodos padre se abren para que la veas.
¿Por qué un documento grande solo se abre dos niveles?
Los documentos de hasta 300 nodos se abren por completo; los más grandes, dos niveles, para que la página siga siendo rápida. Usa Expandir todo cuando lo necesites. El árbol muestra como máximo 3000 filas a la vez.
¿Se envía mi JSON a algún sitio?
No. El análisis y el árbol los hace JavaScript en tu navegador; no se sube nada.
¿Los números grandes se muestran exactos?
Los números se leen como números de JavaScript, así que los enteros mayores que 9.007.199.254.740.991 pierden precisión, igual que con JSON.parse. Guarda esos identificadores como cadenas si deben ser exactos.