본문으로 건너뛰기
jsonbeautifiers
한국어

JSON을 표로

객체 배열을 읽기 좋고 정렬 가능한 표로 보여 줍니다.

JSON
CSV
테이블

붙여 넣은 것은 여러분의 브라우저를 떠나지 않습니다. connect-src 허용 목록 덕분에 이는 약속이 아니라 브라우저가 강제하는 보장입니다. 직접 확인하기

객체 배열을 실제로 읽을 수 있는 표로 그려 줍니다. 열은 첫 행에서 뽑는 게 아니라 모든 행에서 찾아냅니다.

바로 그 마지막 점이 전부입니다. 0번 요소의 키만 읽는 변환기는 뒤에서만 나타나는 필드를 조용히 버립니다. 그리고 그 사실은 한참 뒤, 열이 하나 없다는 걸 알게 될 때 드러납니다.

행과 열은 어떻게 정해지는가

객체 배열
요소마다 한 행. 가장 뻔하고 가장 흔한 경우입니다.
감싸는 객체
{"ok": true, "data": [...]} 같은 모양의 페이로드는 그 배열을 행의 출처로 씁니다. 그리고 그렇게 했다고 알려 줍니다. 규칙이 아니라 추측이기 때문입니다.
단일 객체
한 행이 됩니다.
스칼라 배열
value라는 이름의 열 하나가 생깁니다.
모든 행에 걸친 모든 경로의 합집합을, 각각 처음 나타난 순서대로.

셀 안의 중첩된 값

중첩된 객체는 점이 붙은 열이 됩니다. JSON이 담긴 셀이 아니라 address.city입니다. 중첩된 배열은 여기서 셀 안에 JSON으로 표시합니다. tags.0부터 tags.47까지가 각각 열이 된 표는 아무도 읽을 수 없기 때문입니다.

인덱스 열 형태나 배열 요소마다 한 행인 형태가 필요하면, 그 정책을 설정할 수 있는 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

자주 묻는 질문

왜 어떤 행에서는 열이 비어 있나요?
그 객체들에 해당 키가 없기 때문입니다. 그 열이 존재하는 건 적어도 한 행이 그 키를 갖고 있어서입니다. 빈 셀은 키가 없었다는 뜻이고, null이 든 셀은 키가 있었고 값이 null이었다는 뜻입니다.
열 기준으로 정렬할 수 있나요?
이 미리보기에서는 안 됩니다. CSV를 내려받아 스프레드시트에서 정렬하거나, 걸러 낸 부분집합이 필요하면 JSONPath로 문서를 조회하세요.