JSON Viewer
Un espace de travail multi-fichiers JSON — lisez le même document en texte mis en forme, tableau, arbre ou graphe de relations.
Empty document
Qu'est-ce que JSON Viewer ?
Un visualiseur JSON est un espace de travail pour lire du JSON plutôt que pour l'éditer — le problème étant que le JSON brut est écrit pour les machines, et qu'une réponse d'API de 40 Ko dans un éditeur de texte est un mur de ponctuation. Ce visualiseur garde plusieurs représentations du même document côte à côte : le texte brut d'un côté, et de l'autre une vue mise en forme, un tableau d'enregistrements façon tableur, un arbre dépliable, ou un graphe de relations montrant comment les tableaux imbriqués se relient à leurs parents. Parce que des questions différentes exigent des formes différentes — « quels champs contient-il » est une question d'arbre, « lequel de ces 200 enregistrements a un e-mail null » est une question de tableau — basculer entre elles bat le défilement. Les fichiers ouverts sont conservés dans un espace de travail local pour que vous puissiez tenir plusieurs documents à la fois et y revenir plus tard, et chacun d'eux reste dans votre navigateur.
Comment utiliser JSON Viewer
- Cliquez sur « New » dans la barre latérale Files pour ajouter un document, ou collez du JSON directement dans l'éditeur de la colonne du milieu.
- Choisissez une vue à droite — Pretty pour le texte mis en forme, Table pour les enregistrements en lignes, Tree pour un plan dépliable, Relationship pour un graphe des connexions des tableaux imbriqués.
- Utilisez la zone de recherche au-dessus de la liste de fichiers pour retrouver un document quand l'espace de travail en compte plus d'une poignée.
- Téléchargez le fichier actif avec le bouton de téléchargement, ou copiez-le avec le bouton de copie. La barre d'état affiche le nombre d'enregistrements et si le document s'analyse actuellement.
Exemples
Un tableau d'enregistrements devient une table
Entrée
{"records": [{"id": 1, "name": "John"}, {"id": 2, "name": "Jane"}]}
Sortie
Vue Table : 2 lignes, colonnes id et name — triable, cherchable, paginée
Les tableaux imbriqués deviennent des tables liées dans le graphe
Entrée
{"orders": [{"id": 1, "items": [{"sku": "A1"}, {"sku": "B2"}]}]}
Sortie
Vue Relationship : un nœud orders relié à un nœud items contenant 2 lignes
Erreurs courantes
- Supposer que l'espace de travail est synchronisé — il vit dans le stockage d'un seul navigateur, donc effacer les données de site ou changer d'appareil le perd. Téléchargez tout ce que vous devez conserver.
- Se rabattre sur la vue Table pour un document qui n'est pas une collection d'enregistrements ; un objet de configuration profondément imbriqué n'a pas de lignes naturelles, et la vue Tree lui convient mieux.
- Éditer dans la colonne du milieu en s'attendant à ce que le fichier d'origine sur le disque change — c'est une copie locale, et sauvegarder signifie le re-télécharger.
Pourquoi utiliser cet outil
- Quatre vues du même document, commutables sans recoller ni perdre votre place.
- Un espace de travail multi-fichiers persistant, donc comparer la réponse d'API d'hier avec celle d'aujourd'hui ne suppose pas de jongler avec des onglets.
- Fonctionne entièrement côté client et hors ligne une fois installé, donc les charges utiles de production ne quittent jamais votre machine.