Visor de JSON

La vista de árbol sirve para explorar un payload que no escribiste tú. Contrae las partes que no te importan, expande las que sí, y copia la ruta de cualquier valor para poder alcanzarlo desde el código.

Está pensada para documentos grandes. Los nodos solo se renderizan cuando su padre está expandido, así que un archivo de 10 MB contraído cuesta lo que mida su raíz y no lo que sume su número de nodos.

Qué te muestra el árbol

Más allá de la estructura, unas cuantas cosas que cuesta ver en el texto crudo.

La ruta de cada nodo

En forma normalizada según la RFC 9535, así que se pega directamente en el probador de JSONPath. Pasa el cursor por una fila y cópiala.

Recuento de hijos

Un objeto contraído indica cuántas claves contiene, y un array cuántos elementos. Puedes juzgar la forma sin expandirlo.

Claves duplicadas

Marcadas en línea. En texto crudo, un duplicado a quinientas líneas de su gemelo es prácticamente invisible.

Números que han perdido precisión

Señalados sobre el valor exacto. Un entero por encima de 2^53-1 se muestra con sus dígitos originales y un aviso de que la mayoría de parsers no lo leerán así.

Navegación con teclado

El árbol es un árbol ARIA de verdad, no un montón de elementos clicables, así que funciona como se supone que debe funcionar un árbol: las flechas mueven y expanden, Inicio y Fin saltan a los extremos, Intro y Espacio alternan. Es alcanzable y operable sin ratón, y se anuncia correctamente a un lector de pantalla.

Esto es poco habitual en esta categoría, lo cual dice más de la categoría que de nosotros.

Cuándo usar el árbol y cuándo el texto crudo

El árbol es mejor para orientarte: qué forma tiene esto, dónde está el campo que necesito, cuánto se hunde. El texto crudo es mejor para editar y para buscar, y el editor mantiene la búsqueda de texto completo con Ctrl+F.

Para cualquier cosa que vayas a consultar repetidamente, ve mejor al probador de JSONPath. Escribir una expresión, ver cero coincidencias y ajustar es un ciclo más rápido que ir haciendo clic por un árbol.

How to do this in code

Explorar un payload desde un terminal, cuando no tienes un navegador a mano.

# Top-level keys
jq 'keys' data.json

# The shape, without the values
jq 'walk(if type == "object" then map_values("...") else . end)' data.json

# Every distinct path in the document
jq -r 'paths | join(".")' data.json | sort -u

import json

with open('data.json') as f:
    data = json.load(f)

def walk(node, path=''):
    if isinstance(node, dict):
        for k, v in node.items():
            yield from walk(v, f'{path}.{k}')
    elif isinstance(node, list):
        for i, v in enumerate(node):
            yield from walk(v, f'{path}[{i}]')
    else:
        yield path, node

for path, value in walk(data):
    print(path, '=', value)

// console.dir gives you a collapsible tree in the terminal
console.dir(JSON.parse(text), { depth: null, colors: true });

Preguntas frecuentes

¿Qué tamaño de archivo puede abrir?

El límite no es el parseo, es la memoria. Un documento de 10 MB construye un árbol de unos 294 MB, así que ese es un tamaño cómodo en un escritorio y justo en un móvil. Por encima de unos 25 MB se nota. El árbol solo se construye cuando esta página lo necesita, así que el formateador y el validador manejan archivos mucho mayores.

¿Por qué solo se expanden algunas ramas a la vez?

«Expandir todo» está limitado a propósito a seis niveles. Expandir cada nodo de un documento grande produce cientos de miles de filas y no ayuda a nadie.

¿Puedo editar dentro del árbol?

No. La edición ocurre en el panel de texto, que tiene deshacer, búsqueda y soporte completo de teclado. Un editor de árbol es otro producto y un peor editor de texto.