JSON ツリー表示

ローカル処理

app.tree.view

次の方法でも #data={"name":"Ada"} または #url=... データを流し込めます。読み取り後はアドレスバーから削除されます。

JSON を折りたたみ可能なツリーで表示します。階層が深くフィールドが多いときは、プレーンテキストで括弧を探すより分かりやすく、各ノードの型も見えます。ノードをクリックすると JSONPath をコピーでき、テストや JSONPath ページでの検証に使えます。

関係ない枝を先にたたみ、今見たいパスだけにします。浅い層は既定で開き、より深いノードはクリックすれば開きます。

オブジェクトはフィールド数、配列は要素数を表示し、大きさを見積もりやすくします。

オブジェクト、配列、文字列、数値、真偽値、null を区別します。 "123" と 123 を同じものと見なさないようにします。

結合デバッグで、バックエンドが実際に返す型を確認するのに向いています。

ツリーは構造担当。タイムスタンプや色はフィールド検出ページへ。組み合わせ：先にツリーでパスを特定し、葉が特殊形式かどうか見ます。

読み取り専用の閲覧で、ツリー上で業務データを直接は変えません。

ツリー向きのデータ

{
  "project": "json-toolbox",
  "config": {
    "theme": "light",
    "limits": { "maxSizeMB": 10 }
  }
}

見えるもの

 ルートはオブジェクト → config はオブジェクト → limits はオブジェクト → maxSizeMB は数値。ノードを開けばよく、括弧を数える必要はありません。

ツリー上で値を直接変えられますか？

このページは表示が中心です。直して検証するときはフォーマットページに戻して貼ってください。

とても大きいときは？

できるだけ JSONPath で部分ツリーを抜いてから展開してください。

ノードをクリックすると何が起きますか？

そのノードの JSONPath（例： $.user.id ）をクリップボードへコピーしようとし、アサーションを書きやすくします。

フォーマットとどちらを先に使いますか？

先に合法 JSON にしてください。不正なテキストではツリーを描けません。先に検証またはフォーマットしてください。