JSON Tree Viewer

JSONツリービューアーの仕組み

JSONツリービューアーはフラットなJSONテキストを、色分けされた型・パスのパンくずリスト・ノード検索を備えたインタラクティブな折りたたみ可能なツリーに変換します。深くネストされたAPIレスポンス・Elasticsearchドキュメント・Kubernetesマニフェスト・プレーンテキストでは読めない大規模なJSONファイルを処理します。すべての処理はクライアントサイドで行われます。JSONデータはブラウザを離れません。

複雑なAPIレスポンスは数十レベルの深さで、さらに配列を含むオブジェクトの配列があります。ツリービューは各キーと値のペアを展開可能なノードとしてレンダリングします。ブレースまたはブラケットをクリックしてサブツリー全体を展開または折りたたみます。選択したノードのルートからのパスはドット表記のパンくずリストとして表示されます（例：response.data[0].user.address.city）。これはJavaScriptやPythonで同じフィールドにプログラムでアクセスするために直接使用できます。

JSON配列（順序付き、インデックスでアクセス）はブラケット表記[0]・[1]とオープニングブラケットの横のアイテム数でレンダリングされます。JSONオブジェクト（キーと値のマップ）はブレース表記と表示されたキー数でレンダリングされます。この視覚的な区別により、リストを反復処理しているのか名前付きフィールドにアクセスしているのかが即座に明確になり、試行錯誤なしに正しい解析コードを書くために重要です。

ビューアーは各JSONデータ型に異なる色分けを適用します：文字列（緑）・数値（青）・真偽値（オレンジ）・null（グレー）・オブジェクト（白）・配列（白とブラケットマーカー）。無効なJSONは最初の解析エラーの行番号と列番号を含むインラインエラーをトリガーします。ブラウザコンソールの不可解なSyntaxErrorメッセージを読むより、不正な形式のペイロードをより速く修正できます。

ブラウザは1 MBを超えるJSONファイルのツリーをレンダリングするのに苦労します。何万ものDOMノードのレンダリングが遅延を引き起こすためです。ビューアーは仮想レンダリングを使用します。DOMには常に表示されているノードのみが含まれます。これにより他のオンラインツールを固まらせる10 MB以上のJSONファイルを快適に探索できます。検索機能はすべてのノードを最初に展開せずにツリー全体のキー名または値でノードをフィルタリングします。