JSON 배열 테이블로 보기: 헤더·정렬 작동 원리
API 서버 응답이나 텍스트 파일로 받은 JSON 배열은 대괄호와 중괄호가 한 덩어리로 이어져 있어, 항목이 몇 개인지 어떤 필드가 들어있는지 눈으로 훑기 어렵습니다.
이 글은 그런 JSON 객체 배열을 표로 바꿀 때 컬럼이 실제로 어떻게 만들어지고 정렬·검색이 어떤 기준으로 값을 비교하는지, 그 동작 원리를 사실 그대로 설명합니다. 브라우저만 있으면 도구 없이 직접 확인하는 방법도 함께 다룹니다.
요약 ① 컬럼 헤더는 배열 안 모든 항목의 키를 합쳐서 만들어지므로, 항목마다 필드가 달라도 하나의 표로 묶입니다. ② 정렬은 숫자 컬럼은 숫자 크기로, 그 외에는 소문자로 바꾼 문자열 순서로 비교하며 값이 없는 행은 항상 맨 뒤로 밀립니다. ③ 검색창은 모든 셀 값을 문자열로 바꿔 대소문자 구분 없이 부분일치로 훑고, 중첩된 객체·배열 값은 변환된 문자열로만 표시됩니다.
이런 상황에서 JSON 배열이 표로 안 보이면 곤란해집니다
REST API에서 사용자 목록이나 주문 목록을 조회하면 결과가 JSON 객체 배열로 돌아오는 경우가 많습니다. 항목이 수십에서 수백 개면 텍스트만 보고 몇 번째 항목에 어떤 값이 들어있는지 파악하기 어렵습니다.
특히 사용자마다 phone이나 address 같은 필드가 있기도 하고 없기도 한 응답이라면 더 헷갈립니다. 어떤 객체는 필드가 5개, 다른 객체는 7개인 배열을 눈으로 비교하며 빠진 필드를 찾는 데는 시간이 걸립니다.
가격이나 재고 수량처럼 숫자 필드가 섞인 데이터에서 큰 값부터 순서대로 보고 싶거나, 특정 키워드가 들어간 항목만 걸러보고 싶을 때도 원본 텍스트 그대로는 정렬도 검색도 되지 않습니다.
도구 없이 JSON 배열을 표로 확인하는 방법
브라우저 개발자 도구의 콘솔에는 배열을 표로 그려주는 console.table 기능이 이미 내장되어 있습니다. 별도 설치 없이 이 기능만으로 표·정렬·검색을 모두 재현할 수 있습니다.
표로 보기
F12(맥은 Cmd+Option+I)를 눌러 개발자 도구를 열고 콘솔 탭으로 이동합니다. console.table( 다음에 원본 JSON 배열 텍스트를 그대로 붙여넣고 )로 닫아 실행하면, 배열 안 모든 객체의 키를 모아 컬럼으로 삼은 표가 그려집니다.
이때 중첩된 객체나 배열이 들어있는 셀은 문자열로 풀리지 않고 펼쳐볼 수 있는 참조로 표시됩니다. 이 점은 뒤에서 볼 도구의 표시 방식과 다른 부분이므로 구분해서 봐야 합니다.
정렬 재현하기
콘솔에서 배열을 변수에 담은 뒤(const data = 붙여넣은_배열) data.slice().sort((a, b) => (a.가격 ?? Infinity) - (b.가격 ?? Infinity))처럼 작성하면 숫자 필드를 오름차순으로 비교할 수 있습니다.
문자 필드라면 두 값을 소문자로 바꿔 비교하고, 값이 없는 항목은 따로 걸러 배열 끝에 붙이면 같은 결과가 됩니다.
검색 재현하기
data.filter(row => Object.values(row).some(v => String(v).toLowerCase().includes('찾을단어')))를 실행하면 모든 필드 값을 문자열로 바꿔 소문자 부분일치로 검사한 결과만 남길 수 있습니다.
이 과정을 매번 콘솔에 타이핑하는 대신 같은 로직을 버튼과 입력창으로 미리 만들어 둔 것이 아래 도구입니다.
저희 도구로 확인하기.
브라우저 안에서만 처리되며 별도 설치나 회원가입 없이 JSON 배열을 표로 변환합니다.
흔히 헷갈리는 지점
표가 안 그려지거나 예상과 다르게 보일 때는 대개 아래 네 가지 중 하나입니다.
| 상황 | 실제로 일어나는 일 |
|---|---|
최상위가 배열이 아니라 객체 { } 하나만 붙여넣은 경우 | JSON.parse는 성공하지만 배열이 아니므로 오류 메시지만 뜨고 표는 그려지지 않습니다 |
API 응답이 { "data": [ ... ] }처럼 배열을 한 겹 감싸고 있는 경우 | 최상위가 객체라 위와 같은 오류가 나며, 안쪽 배열 부분만 잘라 붙여넣어야 표가 그려집니다 |
| 값에 중첩된 객체나 배열이 들어있는 경우 | 셀에는 자바스크립트 문자열 변환 결과만 표시되어(객체는 [object Object], 배열은 쉼표로 이어진 텍스트) 세부 내용이 보이지 않습니다 |
| 항목마다 필드 구성이 다른 경우 | 오류 없이 모든 항목의 키를 합친 하나의 표가 만들어지고, 없는 필드는 빈 칸으로 표시됩니다 |
정렬 결과도 헷갈리는 지점입니다. 같은 컬럼 안에 숫자와 문자가 섞여 있으면 항목마다 비교 기준이 달라질 수 있고, 값이 비어있는(null 또는 undefined) 행은 오름차순이든 내림차순이든 항상 표 맨 아래로 밀립니다.
정리
- 컬럼 헤더는 배열 안 모든 항목의 키를 합쳐서 만들어집니다. 항목마다 필드 구성이 달라도 오류 없이 하나의 표가 됩니다.
- 정렬은 숫자는 숫자 크기로, 그 외에는 소문자로 바꾼 문자열 순서로 비교하고, 값이 없는 행은 항상 맨 뒤로 밀립니다.
- 검색창은 모든 셀 값을 문자열로 바꿔 대소문자 구분 없이 부분일치로 찾습니다.
- 최상위가 배열이 아니면(객체 하나, 또는 배열을 감싼 객체) 오류가 나고 표가 그려지지 않습니다.
- 중첩된 객체·배열 값은 문자열로만 표시되어 세부 내용을 표에서 바로 볼 수 없습니다.
브라우저 안에서만 처리되며 별도 설치나 회원가입 없이 JSON 배열을 표로 변환합니다.
자주 묻는 질문
정렬 기준 컬럼에 숫자와 문자가 섞여 있으면 어떻게 비교되나요?
숫자로 인식되는 값은 숫자 크기로 비교되고, 그렇지 않은 값은 소문자로 바꾼 문자열 순서로 비교됩니다. 한 컬럼 안에 숫자와 문자가 섞여 있으면 비교 기준이 혼재되어 예상과 다른 순서로 보일 수 있습니다.
검색창에 분명히 있는 값을 입력했는데 안 걸립니다. 왜 그런가요?
검색은 각 셀 값을 문자열로 바꾼 결과를 기준으로 부분일치를 확인합니다. 중첩된 객체나 배열 값은 원래 내용이 아니라 문자열 변환 결과(예: [object Object])로 표시되므로, 그 안에 있던 실제 값을 검색어로 입력해도 걸리지 않습니다.
값이 없는 필드가 있는 행은 정렬했을 때 어디로 가나요?
정렬 기준 컬럼 값이 null이거나 undefined인 행은 오름차순·내림차순과 관계없이 항상 표 맨 아래에 위치합니다.
JSON 텍스트를 붙여넣었는데 오류만 뜨고 표가 안 나옵니다.
최상위 구조가 배열([ ])이 아니라 객체({ }) 하나이거나 JSON 문법 자체가 올바르지 않은 경우입니다. API 응답이 { "data": [...] }처럼 배열을 감싸고 있다면 안쪽 배열 부분만 잘라 붙여넣어야 합니다.