機能
このツールは、API のレスポンスやエクスポートなどの JSON データを HTML テーブルに変換します。各オブジェクトが行に、各キーが列になります。ネストしたオブジェクトはドット区切りの列名に展開されるため、テーブルは 2 次元のまま保たれます。
使い方
- 入力 欄に JSON を貼り付けるか、
.jsonファイルをアップロードするか、サンプル をクリックします。 - 入力に合わせて右側にテーブルのマークアップが表示されます。不正な JSON はその位置とともに報告されます。
- データ行だけが必要な場合は ヘッダー行を含める をオフにします。
- HTML をコピーするか、
.htmlファイルとしてダウンロードします。
例
[
{ "name": "Alice", "address": { "city": "Shanghai" }, "tags": ["admin", "editor"] },
{ "name": "Bob", "address": { "city": "Beijing" } }
]
からは name、address.city、tags の列を持つテーブルができます。Alice の tags セルは admin; editor となり、Bob のセルは空になります。
ヒント
- API のレスポンスを表示するには、レスポンス全体を貼り付けてください。
{"items": [...]}のような形なら、行は自動的にitemsから取り出されます。 - 変換前に JSON を確認したり修正したりしたい場合は、先に JSON 整形ツールを使ってください。
よくある質問
› どのような JSON 構造を想定していますか?
最適なのはオブジェクトの配列で、1 つのオブジェクトが 1 行になります。{"data": [...]} のように配列のプロパティを 1 つだけ持つオブジェクトも解釈できます。それ以外の値は 1 行になります。
› ネストしたオブジェクトや配列はどう扱われますか?
ネストしたフィールドは address.city のようなドット区切りの列名になります。単純な値の配列は "; " で連結され、オブジェクトの配列には items.0.name のようなインデックス付きのパスが付きます。
› オブジェクトごとにキーが異なる場合は?
列は全キーの和集合で、最初に現れた順に並びます。欠けている値は空のままになります。
› 出力を Web ページにそのまま載せても安全ですか?
はい。テキストは HTML エスケープされるため、<script> のような値もテキストとして表示されます。