Visor JSON
Pega JSON y recorrelo como un arbol, con la ruta de cada valor a un clic de tu portapapeles.
Entrada
El coloreado de sintaxis esta desactivado en este documento porque recolorear algo tan grande en cada pulsacion ralentizaria la escritura. Todas las herramientas siguen funcionando con normalidad.
Arbol
Carga cada imagen directamente desde su propia URL cuando esto esta activado. Es la unica funcion de esta pagina que carga algo desde fuera de tu navegador.
El arbol aparece aqui.
El grafo aparece aqui.
Exportar
Columnas
El arbol aparece aqui.
Selecciona un valor del arbol para ver su ruta Acciones del subarbol
Funciona por completo en tu navegador. Nada de lo que pegas se sube, y puedes comprobarlo en la pestana Red de tu navegador.
Sobre esta herramienta
El arbol se construye a partir del mismo flujo de tokens que imprime el formateador, asi que lo que ves es lo que tu documento dice de verdad: un entero de veinte digitos conserva todos sus digitos y las claves que parecen numeros mantienen el orden en que las escribiste. Cada rama se dibuja al abrirla y no todas de golpe, que es lo que mantiene agil un documento grande en lugar de congelar la pestana mientras se colocan diez mil filas. Al seleccionar un valor se muestra su ruta y se resalta en el editor el texto del que salio, de modo que pasar de la forma de un documento a su texto no obliga a contar corchetes a mano. Una vista de grafo dibuja el mismo arbol como nodos y lineas de conexion, para un documento donde las relaciones entre valores importan mas que el orden en que se escribieron. Una vista de tabla lee un array de objetos como una cuadricula en su lugar, con columnas ordenables, un selector de columnas visibles, un clic para copiar cualquier celda y un boton Exportar CSV, para el caso igual de habitual en que el documento ya es una lista de registros y una hoja de calculo es la forma natural de mirarlo.
Como se usa
- Pega tu JSON en el editor de la izquierda, o carga el ejemplo.
- El arbol se dibuja en cuanto dejas de escribir. Abre una rama para ver lo que contiene.
- Selecciona un valor para ver su ruta y resaltarlo en el editor, y copia la ruta con un boton.