Convertidor gratuït

Arbre JSON Visor

Visualitzeu, formateu i exploreu les dades JSON en un arbre plegable interactiu. Gratuït, segur i no cal pujar.

Arrossegueu i deixeu anar el fitxer JSON aquí

O enganxeu el text JSON a continuació

O

Sobre aquesta eina

Els visualitzadors d'arbres JSON mostren les dades JSON com un arbre jeràrquic navegable en lloc de text senzill. Cada objecte es converteix en una branca plegable; les matrius mostren els seus elements individualment; els valors primitius apareixen com a fulles. La vista estructural fa que sigui fàcil trobar camps específics en dades profundament imbricades, col·lapsar subarbres irrellevants i navegar per documents JSON grans que serien inmanejables com a text pla.

En comparació amb el text JSON amb format, les vistes d'arbre excel·lent en la navegació en dades grans. Una resposta de l'API de 10 MB no és pràctica per desplaçar-se com a text, però tractable com un arbre on col·lapseu les claus de nivell superior que no us importen i amplieu només les parts d'interès.

Aquest visor mostra JSON en un arbre estructurat al vostre navegador. La cerca filtra les branques per clau o valor. La visualització de tipus distingeix cadenes, números, booleans, null, objectes i matrius.

Per què utilitzar un visor d'arbres JSON

Les dades imbricades profundament són difícils de navegar com a text. Els fitxers de configuració, les respostes de l'API i l'estat serialitzat solen tenir més de 5 nivells d'imbricació. Una vista en arbre us permet col·lapsar nivells irrellevants i centrar-vos en allò que importa; Les vistes de text requereixen un desplaçament acurat i un recompte de claudàtors.

Les capacitats de cerca i filtre també importen. Trobar totes les claus anomenades "user_id" en un document complex és ràpid amb un visor conscient de la cerca; impossible de fer de manera fiable amb text pla.

Com utilitzar-la

Enganxeu JSON, navegueu per l'arbre.

  1. Enganxeu el vostre JSON: Deixeu JSON a l'àrea d'entrada. El visor analitza i representa l'arbre estructurat.
  2. Expandir i col·lapsar: Feu clic a les branques per ampliar o reduir. Útil per centrar-se en subarbres específics de grans dades.
  3. Cerca: Filtra per clau o valor. Les branques coincidents es mantenen visibles; que no coincideixen s'amaguen.
  4. Inspeccionar valors específics: Feu clic a una fulla per veure el seu valor complet (útil per a cadenes llargues) i copieu el camí (per exemple, users.0.profile.email) per utilitzar-lo al codi.

Casos d'ús comuns

Detalls tècnics

L'anàlisi JSON utilitza JSON.parse, que falla en una entrada no vàlida amb un error d'anàlisi que apunta a la ubicació del problema. JSON vàlid es renderitza en un objecte JavaScript que el visualitzador camina de forma recursiva per produir l'arbre.

Renderització: cada nivell de nidificació es converteix en una branca sagnada. Les claus d'objecte són etiquetes; els valors es representen en funció del tipus: cadenes entre cometes, números sense, booleans com a vertader/fals, nul de manera explícita, objectes i matrius com a branques plegables.

Rendiment: JSON molt gran (10 MB+) pot alentir la renderització. L'expansió mandrosa (que només representa branques visibles actualment) ajuda. La cerca en documents grans pot trigar un temps notable; indexar l'arbre a la primera anàlisi ajuda.

Bones pràctiques

Preguntes freqüents

Fins a quina profunditat pot arribar l'arbre JSON?
No hi ha límit de profunditat artificial. L'eina representa els arbres tan profunds com la vostra estructura JSON. Tanmateix, la nidificació extremadament profunda (més de 100 nivells) pot alentir la representació al navegador.
Puc cercar dins de l'arbre JSON?
Utilitzeu Ctrl/Cmd+F per cercar claus o valors. Els nodes coincidents es ressaltaran i els seus nodes pare s'ampliaran automàticament per mostrar el camí.
Quin format de ruta JSON s'utilitza?
L'eina utilitza la notació de punts JSONPath ($.key.nested.array[0].value). Aquest format és compatible amb l'accés a propietats de JavaScript i amb la majoria de biblioteques JSONPath.
Puc editar valors a l'arbre?
Aquest és un visor només de lectura per a l'exploració. Per editar JSON, utilitzeu la nostra eina JSON Formatter que proporciona una interfície editable amb validació.
S'han penjat les meves dades?
No. L'anàlisi i la representació es produeixen al vostre navegador.
Com exporto part de l'arbre?
La majoria d'espectadors ofereixen una còpia com a JSON per a les branques seleccionades. El valor exportat és la mateixa estructura amb només les claus seleccionades.
Per què l'arbre és lent amb dades grans?
La representació DOM de molts nodes és cara. L'expansió mandrosa (que només representa branques visibles) ajuda; per a dades molt grans, les eines dedicades (jq, codi) són més eficients.
Puc veure JSON des d'un URL?
Alguns espectadors obtenen URL directament. Altres requereixen enganxar. CORS pot impedir l'obtenció d'origen creuat d'alguns URL.