Visionneuse d'arbre JSON

Visionneuse d'arbre JSON - Explorateur interactif

Outil avancé pour visualiser, explorer et comprendre des structures JSON complexes. Interface en arbre pliable, recherche en temps réel, copie de chemin, mode plein écran et nombreuses options d'affichage. Idéal pour les développeurs, testeurs API et analystes.

Pourquoi mon JSON est-il invalide alors qu'il semble correct ?

Les coupables les plus fréquents sont les virgules finales, les clés sans guillemets, les apostrophes simples et les commentaires égarés — tous valides en JavaScript mais interdits par la spécification JSON (RFC 8259). Le JSON strict exige des clés et chaînes entre guillemets doubles, sans virgule après le dernier élément d'un tableau ou objet, et sans commentaire d'aucune sorte. Autres erreurs fréquentes : barres obliques inverses non échappées dans les chaînes (écrivez \\ pour une seule barre), caractères de contrôle non échappés comme un saut de ligne brut, et copie de « guillemets typographiques » (“”) depuis un traitement de texte au lieu de guillemets droits (""). Ce visualiseur affiche la première erreur d'analyse avec ligne et colonne exactes pour sauter directement au caractère fautif. Si vous devez consommer une entrée non stricte d'un fichier de configuration, collez-la dans un convertisseur JSON5 d'abord, puis passez le résultat propre dans ce visualiseur.

Quelle différence entre les objets et tableaux JSON dans la vue arborescente ?

JSON a deux types de conteneurs et le visualiseur les marque différemment. Les objets sont des collections non ordonnées de membres nommés et apparaissent comme {} avec des paires clé:valeur ; le visualiseur affiche le nom de clé dans une couleur distincte et la spécification ne garantit aucun ordre. Les tableaux sont des séquences ordonnées et apparaissent comme [] avec des indices numériques 0, 1, 2… ; l'ordre est significatif et doit être préservé. Dans l'un comme l'autre vous pouvez imbriquer tout type de valeur : chaîne, nombre, booléen, null, autre objet ou autre tableau. Utilisez les objets quand chaque élément a un identifiant stable et les tableaux quand les éléments sont interchangeables ou ordonnés. Mélanger les deux est normal : un tableau d'objets est la forme canonique pour des données tabulaires, et un objet dont les valeurs sont des tableaux est la forme canonique pour des données groupées.

Comment déplier ou replier tous les nœuds d'un coup ?

Utilisez les commandes Tout Déplier et Tout Replier en haut de l'arbre. Tout Déplier ouvre récursivement chaque objet et tableau jusqu'aux valeurs feuilles — utile quand vous voulez parcourir tout le document ou l'envoyer à un lecteur d'écran. Tout Replier n'affiche que les clés de premier niveau, bien plus rapide à parcourir sur les gros volumes. Pour ouvrir une seule branche sans révéler ses enfants, cliquez directement sur le triangle de déploiement à côté de ce nœud ; maintenez Alt (ou Option sur macOS) et cliquez pour basculer ce nœud avec tous ses descendants d'un coup. L'état d'expansion actuel est préservé pendant la recherche, donc un résultat dans une branche repliée ouvrira automatiquement uniquement le chemin nécessaire pour le révéler.

Ce visualiseur gère-t-il le BOM UTF-8 et autres problèmes d'encodage ?

Oui. L'analyseur retire un BOM UTF-8 en tête (les octets EF BB BF, souvent ajoutés par les outils Windows et certains exports Java) avant l'analyse, donc un fichier préfixé par BOM ne causera pas d'erreur de syntaxe ici. Le JSON lui-même doit être encodé en UTF-8, UTF-16 ou UTF-32 selon la RFC 8259, avec UTF-8 fortement recommandé pour l'échange. Si vous collez du texte UTF-16 depuis le presse-papiers, le navigateur l'aura déjà décodé, vous avez donc rarement besoin de vous en préoccuper. Le visualiseur affiche aussi correctement les séquences d'échappement : \u00e9 s'affiche é, les paires de substitution comme \uD83D\uDE00 s'affichent comme un seul emoji 😀, et \n est affiché comme un saut de ligne littéral dans les chaînes plutôt que de casser la mise en page.

Que signifient vraiment les séquences d'échappement comme \u00e9, \n, \t et \/ ?

Ce sont les six échappements de chaîne définis par JSON. \" insère un guillemet double, \\ insère une barre oblique inverse, \/ insère une barre oblique (légal mais facultatif — la barre n'a jamais besoin d'être échappée pour parser, seulement pour intégrer du JSON dans une balise <script> HTML), \b \f \n \r \t insèrent les caractères de contrôle ASCII retour arrière, saut de page, nouvelle ligne, retour chariot et tabulation, et \uXXXX insère le point de code Unicode de valeur hexa XXXX. Pour les points de code au-delà de U+FFFF, JSON utilise des paires de substitution UTF-16 : \uD83D\uDE00 encode l'emoji visage souriant U+1F600. Tout autre échappement avec barre inverse (par exemple \x41 ou \0) est une erreur de syntaxe en JSON strict, même si beaucoup de langages acceptent ces formes dans leurs propres littéraux.

Comment interroger une valeur profondément imbriquée avec JSONPath ?

Cette visionneuse intègre une barre de requête JSONPath : tapez une expression et les nœuds correspondants sont surlignés dans l'arbre, avec un compteur de correspondances à côté de la barre. Le sous-ensemble pris en charge couvre les opérateurs nécessaires à la plupart des usages API : $ pour la racine, .cle pour une propriété enfant, [n] pour un indice de tableau (les négatifs comptent depuis la fin), [début:fin] pour les tranches, [*] joker, .. pour la descente récursive (ex. $..hobbies[*] trouve chaque loisir à toute profondeur) et un filtre simple [?(@.champ == 'valeur')] avec ==, !=, >, <, >=, <= sur des tableaux d'objets. Exemple : $.education[0].degree renvoie le premier diplôme, et $.projects[?(@.stars > 100)] renvoie les projets de plus de 100 étoiles. Utilisez Copier le résultat JSONPath pour placer les nœuds dans le presse-papiers, ou Télécharger le résultat JSONPath pour les enregistrer en fichier .json. Pour un usage programmatique, des bibliothèques existent dans chaque langage majeur : jsonpath-plus et JMESPath.js en JavaScript, jsonpath-ng et jmespath en Python, et la fonction intégrée JSON_TABLE dans les moteurs SQL modernes.

Que signifient les chiffres des Statistiques (clés, valeurs feuille, profondeur, taille) ?

Après le rendu d'un document, le panneau Statistiques résume sa forme pour dimensionner une charge utile d'un coup d'œil, sans faire défiler. Clés compte chaque nom de propriété d'objet ; valeurs feuille compte les primitifs (chaîne, nombre, booléen, null) qui contiennent les données réelles ; objets et tableaux comptent les nœuds conteneurs de chaque type ; profondeur max indique de combien de niveaux la valeur la plus profonde se situe sous la racine, le meilleur indicateur de la difficulté à parcourir les données en code ; et taille est la longueur en octets UTF-8 de l'entrée (o, Ko ou Mo). Ces mesures répondent à des questions courantes comme « quelle est la profondeur de cette réponse d'API », « combien d'enregistrements l'endpoint a renvoyés » (lisez la longueur du tableau sur le nœud concerné) et « est-ce proche d'une limite de charge utile ». Comme la taille en octets est calculée à partir du texte exact que vous avez collé, elle correspond à ce qu'un serveur verrait sur le réseau avant gzip.

Quel est le plus gros fichier JSON que je peux coller sans bloquer le navigateur ?

Les navigateurs peuvent généralement parser du JSON jusqu'à environ 50 Mo sur un desktop, mais ce qui fige vraiment l'UI c'est le rendu d'un arbre avec des millions de nœuds. Règle approximative : prévoyez moins de 5 Mo ou moins de 100 000 valeurs feuilles pour une expérience interactive fluide ; au-delà le visualiseur utilise un rendu virtualisé et ne dessine que les nœuds visibles. Pour les fichiers de plus de 100 Mo, streamez les données avec un parser de style SAX au lieu de charger tout le document en mémoire : ijson en Python, JSONStream en Node ou Jackson Streaming API en Java vous permettront de parcourir le document événement par événement et de traiter les enregistrements au fur et à mesure. Pour des jeux vraiment massifs, basculez le format de stockage en NDJSON (une valeur JSON par ligne) ou Parquet pour pouvoir lire et filtrer sans jamais matérialiser le document complet.

Pourquoi les grands nombres comme 9007199254740993 s'affichent-ils incorrectement ?

JSON permet tout nombre décimal avec une précision arbitraire, mais JavaScript parse chaque nombre en double IEEE 754 64 bits, qui ne peut représenter exactement les entiers que jusqu'à 2^53 − 1 = 9 007 199 254 740 991 (la valeur de Number.MAX_SAFE_INTEGER). Les valeurs plus grandes s'arrondissent silencieusement au double représentable le plus proche, donc 9007199254740993 devient 9007199254740992. Cela touche tous ceux qui utilisent JSON pour transporter des IDs de base de données, des IDs snowflake de Twitter, des valeurs blockchain ou des horodatages en nanosecondes. La solution standard est de citer les grands nombres comme chaînes ("id": "9007199254740993") et de les parser avec BigInt ou une bibliothèque décimale côté réception. JSON5 et certains parsers streaming offrent une option « utiliser BigInt pour les entiers hors plage sûre », mais le JSON.parse du navigateur ne le fait pas, alors vérifiez toujours si votre producteur cite les grands entiers avant de vous fier aux comparaisons d'égalité.

Fonctionnalités clés

• Arbre pliable interactif pour naviguer facilement
• Coloration syntaxique selon le type de donnée
• Dépliage/repliage global ou par niveau (1,2,3,tout)
• Recherche en temps réel des clés et valeurs
• Copie du chemin JSON (notation à crochets pour les tableaux, ex. users[0].name)
• Téléchargement du document complet en JSON formaté
• Téléchargement du résultat d'une requête JSONPath en fichier .json
• Copie rapide des valeurs
• Affichage optionnel des types et index des tableaux
• Mode plein écran pour les gros JSON
• Mode sombre / clair
• Formatage du JSON minifié ou invalide
• JSON d'exemple intégré
• Support des structures très imbriquées
• Indicateurs visuels pour objets, tableaux et primitives
• Design responsive desktop/mobile
• Traitement 100 % client, aucune fuite de données
• Fonctionne hors ligne après chargement
• Aucune limite de taille pratique
• Rendu rapide même pour des JSON volumineux