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でドキュメントを問い合わせてください。