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로 문서를 조회하세요.