Saltar al contenido

Visor de árbol JSON

Explora JSON como un árbol contraíble y buscable con tipos codificados por colores, y haz clic en cualquier clave para copiar su ruta en notación de punto.

 

Cómo funciona

Esta herramienta analiza JSON y lo muestra como un árbol contraíble, codificado por colores según el tipo (cadena, número, booleano o null), con un cuadro de búsqueda que filtra claves y valores coincidentes y un botón para copiar en cada clave que copia su ruta completa en notación de punto, como address.city o tags[0].

  1. Pegar JSON

    Cualquier objeto, arreglo o valor JSON válido.

  2. Expandir, contraer o buscar

    Haz clic en la flecha para plegar una rama o escribe para filtrar.

  3. Haz clic en una clave para copiar su ruta

    Pega la ruta directamente en tu código.

Lectura del árbol

Cada fila muestra una clave o un índice entre corchetes para los elementos de un arreglo, seguido de su valor. Los objetos y arreglos muestran cuántos elementos secundarios tienen y pueden contraerse en una sola línea. La ruta que aparece al copiar una clave sigue el acceso habitual a propiedades de JavaScript: un campo de un objeto anidado se une con un punto, como address.city, y un índice de arreglo se escribe entre corchetes, como tags[0].

Se ejecuta en tu navegador, sin límite de tamaño impuesto

El análisis y la renderización se realizan completamente en JavaScript en esta página; tu JSON, que puede contener datos personales, claves de API o estructuras internas, nunca se carga en ningún servidor. No hay un límite codificado de profundidad o tamaño, pero un documento JSON con muchos miles de nodos puede hacer que la página tarde en renderizarse, ya que cada nodo se convierte en elementos del DOM. Para archivos muy grandes, contrae las ramas de nivel superior que no necesites o usa el cuadro de búsqueda para ir directamente a una clave.

Preguntas frecuentes

¿Cómo exploro visualmente un objeto JSON anidado complejo?

Pega tu JSON en el área de entrada y haz clic en Analizar árbol. La herramienta genera un árbol contraíble donde cada rama se puede expandir o contraer individualmente. Las cadenas aparecen en verde, los números en azul, los valores booleanos en ámbar y los valores null en cursiva gris. Usa Expandir todo o Contraer todo para navegar rápidamente por estructuras grandes, o escribe en el cuadro de búsqueda para filtrar por claves y valores coincidentes.

¿Cómo copio la ruta a una clave JSON anidada?

Haz clic en cualquier clave o índice de arreglo en la vista de árbol. La herramienta copia la ruta completa en notación de puntos, por ejemplo, address.city o tags[0], al portapapeles. Esto resulta útil al escribir código para acceder a un valor anidado y necesitas la ruta exacta sin contar los índices del arreglo ni encadenar nombres de propiedades.

¿Se envían mis datos JSON a un servidor al usar el visor de árbol JSON?

No. El análisis y la representación ocurren completamente en tu navegador mediante JavaScript. Tus datos JSON, que pueden contener información personal, claves de API o estructuras de datos internas, nunca se cargan ni se transmiten a ningún lugar. La herramienta es segura para usar con cualquier carga útil JSON.

¿Cuál es la profundidad o tamaño máximo de JSON que puede manejar este visor de árbol?

El renderizador del árbol no tiene un límite de profundidad fijo, pero un JSON muy grande o profundamente anidado, con cientos de niveles o miles de nodos, puede hacer que la página tarde en mostrarse porque cada nodo genera elementos DOM. Para archivos JSON muy grandes, contrae los nodos del nivel superior y expande solo las secciones que necesites, o usa el cuadro de búsqueda para filtrar directamente hasta la clave que buscas.

¿Qué tipos reconoce y codifica por colores el visor de árbol JSON?

La herramienta reconoce y codifica por colores cuatro tipos primitivos: cadena (verde), número (azul), booleano (ámbar) y null (gris en cursiva). Los arreglos y objetos aparecen como ramas contraíbles con un recuento de elementos secundarios. Así es fácil detectar incompatibilidades de tipo; por ejemplo, notar que un campo que debería ser un número contiene en realidad una cadena entre comillas.