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 ou expression similaire ?

JSONPath ($ pour racine, .cle pour enfant, [n] pour indice de tableau, .. pour descente récursive, [?(@.champ=='x')] pour filtre) et JMESPath (un sur-ensemble plus strict avec multiselect et projections) sont les deux langages de requête dominants pour JSON. Ils permettent d'écrire des expressions comme $.store.book[?(@.price < 10)].title pour extraire le titre de chaque livre sous 10 dollars sans écrire de code impératif. Ce visualiseur se concentre sur la navigation plutôt que la requête, donc pour évaluer une expression JSONPath ouvrez notre outil dédié JSON Path Finder, collez le même document et tapez l'expression. 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.

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 pointée)
• 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