JSON ツリー ビューアー
JSONデータをインタラクティブな折りたたみツリーで表示・整形・探索。無料・安全・アップロード不要。
JSONファイルをドラッグ&ドロップ
または下にJSONテキストを貼り付け
JSONデータをインタラクティブな折りたたみツリーで表示・整形・探索。無料・安全・アップロード不要。
または下にJSONテキストを貼り付け
JSON ツリー ビューアは、JSON データをプレーン テキストではなく、ナビゲート可能な階層ツリーとして表示します。各オブジェクトは折りたたみ可能なブランチになります。配列は項目を個別に表示します。プリミティブ値は葉として表示されます。構造ビューを使用すると、深くネストされたデータ内の特定のフィールドを簡単に見つけたり、無関係なサブツリーを折りたたんだり、フラット テキストとして管理できない大きな JSON ドキュメントをナビゲートしたりすることができます。
フォーマットされた JSON テキストと比較して、ツリー ビューは大規模なデータのナビゲーションに優れています。 10MB の API 応答をテキストとしてスクロールするのは現実的ではありませんが、気にしないトップレベルのキーを折りたたんで、関心のある部分だけを展開するツリーとして扱うことは可能です。
このビューアは、ブラウザの構造化ツリーに JSON をレンダリングします。検索では、キーまたは値で分岐をフィルターします。型を認識した表示では、文字列、数値、ブール値、null、オブジェクト、配列が区別されます。
深くネストされたデータはテキストとしてナビゲートするのが困難です。構成ファイル、API 応答、およびシリアル化された状態には、多くの場合、5 レベル以上のネストがあります。ツリー ビューを使用すると、無関係なレベルを折りたたんで、重要なことに集中できます。テキストビューでは、慎重にスクロールして括弧を数える必要があります。
検索とフィルターの機能も重要です。検索対応ビューアを使用すると、複雑なドキュメント全体で「user_id」という名前のすべてのキーを高速に検索できます。プレーンテキストでは確実に実行することは不可能です。
JSON を貼り付け、ツリー内を移動します。
JSON 解析では JSON.parse が使用されますが、無効な入力では失敗し、問題の場所を示す解析エラーが発生します。有効な JSON は JavaScript オブジェクトにレンダリングされ、ビューアはそれを再帰的に実行してツリーを生成します。
レンダリング: ネストの各レベルはインデントされたブランチになります。オブジェクトキーはラベルです。値はタイプに基づいてレンダリングされます。引用符で囲まれた文字列、引用符のない数値、true/false としてのブール値、明示的な null、折りたたみ可能な分岐としてのオブジェクトと配列です。
パフォーマンス: 非常に大きい JSON (10MB 以上) はレンダリングを遅くする可能性があります。遅延拡張 (現在表示されているブランチのみをレンダリング) が役に立ちます。大きなドキュメントにわたる検索にはかなりの時間がかかる場合があります。最初の解析時にツリーにインデックスを付けると役立ちます。