本文へスキップ
jsonbeautifiers
日本語

JSONビューアー

各ノードのJSONパスが分かる折りたたみツリー。大きなファイル向けに設計。

入力
構造

貼り付けたものがブラウザの外に出ることはありません。 connect-src の許可リストにより、これは約束ではなくブラウザによる保証になっています。 自分で確かめる

ツリービューは、自分が書いたのではないペイロードを調べるためのものです。関心のない部分は畳み、必要な部分だけ開き、任意の値のパスをコピーしてコードから取りにいけます。

大きなドキュメントを想定した作りです。ノードは親が開かれたときにだけ描画されるので、畳んだ状態の10MBのファイルは、ノード数ではなくルートの長さぶんのコストしかかかりません。

ツリーで分かること

構造そのものに加えて、生のテキストでは見つけにくいものがいくつかあります。

すべてのノードのパス
RFC 9535の正規化形式なので、JSONPathテスターにそのまま貼り付けられます。行にカーソルを合わせてコピーしてください。
子要素の数
畳んだオブジェクトはキーの数を、配列は要素数を表示します。開かなくても形の見当がつきます。
重複キー
その場に印を付けます。生のテキストでは、500行離れた重複は事実上見えません。
精度が失われた数値
該当する値に印を付けます。2^53-1を超える整数は元の桁のまま表示し、多くのパーサーはそのようには読まないという警告を添えます。

キーボード操作

このツリーはクリック可能な要素の寄せ集めではなく、本物のARIAツリーです。したがってツリーとして期待される動作をします。矢印キーで移動と開閉、HomeとEndで両端へジャンプ、EnterとSpaceで切り替え。マウスなしで到達でき操作でき、スクリーンリーダーにも正しく伝わります。

この分野では珍しいことですが、それは自慢というより、この分野の水準が低いということです。

ツリーを使う場面と生テキストを使う場面

全体像をつかむにはツリーが向いています。これはどんな形か、必要なフィールドはどこか、どこまで深いのか。編集と検索には生のテキストが向いており、エディタではCtrl+Fで全文検索が使えます。

同じ問い合わせを繰り返すつもりなら、JSONPathテスターに移ってください。式を書き、ヒット0件を見て直す、というループのほうが、ツリーをクリックして回るより速いです。

How to do this in code

ブラウザが手元にないとき、ターミナルからペイロードを調べる方法です。

sh jq

最後のものは、大きなファイルに対して「このデータにはどんなフィールドがあるのか」を最短で答える方法です。

# Top-level keys
jq 'keys' data.json

# The shape, without the values
jq 'walk(if type == "object" then map_values("...") else . end)' data.json

# Every distinct path in the document
jq -r 'paths | join(".")' data.json | sort -u
py Python
import json

with open('data.json') as f:
    data = json.load(f)

def walk(node, path=''):
    if isinstance(node, dict):
        for k, v in node.items():
            yield from walk(v, f'{path}.{k}')
    elif isinstance(node, list):
        for i, v in enumerate(node):
            yield from walk(v, f'{path}[{i}]')
    else:
        yield path, node

for path, value in walk(data):
    print(path, '=', value)
js Node

depth: nullを付けないと、Nodeは2階層で打ち切り、残りを[Object]と表示します。

// console.dir gives you a collapsible tree in the terminal
console.dir(JSON.parse(text), { depth: null, colors: true });

よくある質問

どのくらいの大きさのファイルまで開けますか?
制約はパースではなくメモリです。10MBのドキュメントはおよそ294MBのツリーを作るので、デスクトップなら余裕がありますが、スマートフォンではぎりぎりです。25MBあたりを超えると体感で分かります。ツリーはこのページが必要とするときにだけ構築されるので、フォーマッターやバリデーターはもっと大きなファイルを扱えます。
なぜ一度に一部の枝しか開かないのですか?
「すべて展開」は意図的に6階層までに制限しています。大きなドキュメントのすべてのノードを開くと数十万行になり、誰の役にも立ちません。
ツリー上で編集できますか?
できません。編集はテキストペインで行います。そちらには取り消し、検索、完全なキーボード操作があります。ツリーエディタは別の製品であり、テキストエディタとしては劣ります。