Visor de JSON
Pega o sube un JSON y explóralo como un árbol plegable. Busca claves y valores, mira cada tipo y conteo, y haz clic en cualquier nodo para copiar su ruta como JavaScript o JSONPath. Nada sale de tu navegador.
Última actualización:
Pega o sube un JSON para verlo como árbol.
––Haz clic en cualquier nodo del árbolCómo usar Visor de JSON
- Pega tu JSON en el cuadro, o pulsa Subir JSON (o suelta un archivo .json sobre el cuadro).
- Explora el árbol: haz clic en las flechitas para abrir objetos y arrays, o usa Expandir todo y Contraer todo.
- Haz clic en cualquier nodo para seleccionarlo. Su ruta se copia al portapapeles en el formato elegido en “Al hacer clic se copia”, y ambos estilos de ruta y el valor se muestran debajo del árbol.
- Busca una clave o un valor. Las coincidencias se resaltan y se abren en el árbol; usa los botones de flecha o Intro para saltar entre ellas.
- Corrige errores rápido: si el JSON no es válido, obtienes la línea, la columna y un indicador que señala el carácter exacto.
Tipos de datos JSON de un vistazo
Cada valor de un documento JSON es de uno de seis tipos. El visor etiqueta cada nodo con su tipo para que detectes de un vistazo un número guardado como cadena o un null inesperado.
| Tipo | Ejemplo | Notas |
|---|---|---|
| object | {"id": 7, "name": "Ada"} | Conjunto no ordenado de pares clave/valor. Las claves deben ser cadenas entre comillas dobles. |
| array | [1, 2, 3] | Lista ordenada. Se accede a los elementos por índice, empezando por 0. |
| string | "hello\nworld" | Solo comillas dobles. Secuencias de escape: \" \\ \/ \b \f \n \r \t \uXXXX. |
| number | -12.5e3 | Sin ceros a la izquierda, sin NaN ni Infinity, sin hexadecimal. |
| boolean | true / false | Solo en minúsculas. |
| null | null | Un valor vacío explícito. |
Ruta JS vs JSONPath: ejemplo práctico
Toma este documento: {"books": [{"title": "Forest Trails", "in stock": true}]}. Al hacer clic en los nodos title e in stock se obtiene:
| Nodo | Ruta JS | JSONPath |
|---|---|---|
| Raíz | data | $ |
| Primer libro | data.books[0] | $.books[0] |
| Título | data.books[0].title | $.books[0].title |
| Clave con un espacio | data.books[0]["in stock"] | $.books[0]['in stock'] |
La notación de punto solo es válida cuando una clave parece un identificador (letras, dígitos, _ o $, sin empezar por un dígito). Cualquier otra clave, incluidas las que tienen espacios o guiones o empiezan por un número, pasa automáticamente a notación de corchetes.
Errores comunes de JSON y cómo corregirlos
| Error mostrado | Causa habitual | Solución |
|---|---|---|
| No se permite una coma final | [1, 2, 3,] | Elimina la última coma. |
| Se esperaba un nombre de propiedad entre comillas dobles | {name: "Ada"} or {'name': "Ada"} | Pon las claves entre comillas dobles. |
| Las cadenas deben usar comillas dobles | {"a": 'x'} | Sustituye las comillas simples por comillas dobles. |
| Se esperaba ',' o '}' después del valor de la propiedad | Falta una coma entre dos pares | Añade una coma después del valor anterior. |
| Carácter de control sin escapar en una cadena | Un salto de línea o una tabulación reales dentro de una cadena | Usa \n o \t en su lugar. |
| Carácter inesperado después del final del valor JSON | Dos documentos pegados juntos o un corchete suelto | Ponlos dentro de un array o elimina el texto sobrante. |
Preguntas frecuentes
¿Qué es un visor de JSON?
Un visor de JSON convierte el texto JSON sin formato en un árbol interactivo para que puedas abrir y cerrar objetos y arrays, ver de qué tipo es cada valor y encontrar datos rápidamente, en lugar de desplazarte por un bloque de texto largo.
¿Cómo obtengo la ruta de un valor en un JSON?
Haz clic en el nodo del árbol. La herramienta muestra su ruta de JavaScript, como data.books[0].title, y su JSONPath, como $.books[0].title, y copia el formato que elegiste. Las claves con espacios o símbolos usan notación de corchetes, por ejemplo data["in stock"].
¿Cuál es la diferencia entre una ruta JS y JSONPath?
Una ruta JS es el código que escribirías en JavaScript para llegar al valor desde una variable (aquí llamada data). JSONPath es una sintaxis de consulta que empieza en $ y que usan herramientas como los filtros tipo jq, las pruebas de Postman, Kubernetes y muchas API.
¿Por qué mi JSON muestra un error?
JSON es estricto: las claves y las cadenas deben usar comillas dobles, y no se admiten comas finales, comentarios ni comillas simples. El visor indica la línea y la columna exactas del primer problema para que puedas corregirlo.
¿El visor cambia los números grandes?
No. Los números se muestran exactamente como están escritos, así que un ID como 9007199254740993 no se redondea como lo haría JSON.parse de JavaScript. El orden de las claves también se mantiene como en tu archivo.
¿Mi JSON se sube a un servidor?
No. El análisis, la búsqueda y la representación se hacen en tu navegador con JavaScript. Tus datos nunca se envían a ningún sitio, lo que lo hace seguro para claves de API, tokens y registros privados.
¿Puede abrir archivos JSON grandes?
Sí. El árbol se construye de forma diferida, así que solo se dibujan las partes que abres. Los archivos de decenas de megabytes funcionan en un navegador moderno; en documentos muy grandes, Expandir todo se limita a los primeros niveles para que la página siga respondiendo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →