本文へスキップ
jsonbeautifiers
日本語

JSONをテーブルに

オブジェクトの配列を、読みやすい並べ替え可能なテーブルとして表示します。

JSON
CSV
テーブル

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

オブジェクトの配列を、実際に読めるテーブルとして表示します。列は最初の要素から推測するのではなく、すべての行から洗い出します。

この最後の点がすべての違いです。先頭要素のキーだけを見るコンバーターは、あとの行にしか現れないフィールドを黙って落とします。そして気づくのは、下流で列が足りないと分かったときです。

行と列の決め方

オブジェクトの配列
要素ごとに1行。分かりやすく、かつ最も多いケースです。
ラッパーオブジェクト
{"ok": true, "data": [...]}のような形のペイロードでは、その配列を行の元として使い、そのことを明示します。規則ではなく推測だからです。
単一のオブジェクト
1行になります。
スカラー値の配列
valueという名前の列が1つだけできます。
全行のすべてのパスの和集合を、最初に現れた順に並べます。

セルの中のネストした値

ネストしたオブジェクトはドット付きの列になります。JSONの入ったセルではなくaddress.cityです。ネストした配列はここではセル内にJSONとして表示します。tags.0からtags.47までが別々の列になったテーブルは、誰にも読めないからです。

インデックス列の形や、配列要素ごとに1行という形が必要なら、それらの方針を設定できる「JSONをCSVに変換」のページを使ってください。

How to do this in code

コードでJSONからテーブルを作る方法。

py Python
import pandas as pd

df = pd.json_normalize(records)
print(df.to_markdown(index=False))
df.to_csv('out.csv', index=False)
sh jq

map(keys) | add | unique の部分が、最初のオブジェクトではなく和集合を取らせている箇所です。

# Header row from the union of all keys, then the rows
jq -r '(map(keys) | add | unique) as $cols
       | $cols, (.[] | [.[$cols[]]])
       | @csv' records.json
js JavaScript
const columns = [...new Set(records.flatMap(Object.keys))];
const rows = records.map((r) => columns.map((c) => r[c] ?? ''));

console.table(records);   // in a browser console or Node

よくある質問

いくつかの行で列が空になっているのはなぜですか?
そのオブジェクトにそのキーが存在しないからです。列があるのは、少なくとも1行がそのキーを持っているからです。空のセルはキーがなかったことを意味し、nullが入ったセルはキーがあってその値がnullだったことを意味します。
列で並べ替えできますか?
このプレビューではできません。CSVをダウンロードして表計算ソフトで並べ替えるか、絞り込んだ部分集合が必要ならJSONPathでドキュメントを問い合わせてください。