JSON 배열 HTML 리스트 변환 원리
JSON 배열 데이터를
- 이나
- 태그를 하나씩 여닫다가 태그를 빠뜨리거나 값을 잘못 옮기는 실수도 흔합니다. 이 글은 JSON 배열의 각 항목이 정확히 어떤 규칙으로
- 텍스트가 되는지, 그리고 그 규칙을 직접 코드로 재현하는 방법까지 확인 가능한 사실로만 정리합니다.
요약 ① 문자열 항목은 그대로 문자열화되고, 객체 항목은 지정한 '객체 키 명칭'의 값을 꺼내며 그 키가 없으면 객체 전체가 JSON 문자열로 대체됩니다. ② 결과를 감싸는 태그는 ul/ol 선택에 따라 정해지고, li 클래스명·ul/ol 클래스명 입력값은 각각 모든 li와 바깥 태그의 class 속성에 그대로 붙습니다. ③ 작은따옴표·트레일링 콤마가 섞인 JSON은 파싱 오류를 내고, 배열이 아니라 객체를 통째로 넣으면 "입력값은 반드시 JSON 배열(Array) 형태여야 합니다" 오류가 뜹니다.
언제 이 변환이 필요해지나
API가 돌려주는 데이터나 스프레드시트에서 내보낸 데이터는 대부분 JSON 배열 형태입니다. 공지사항 제목 목록이나 상품명 목록을 정적 HTML 페이지나 CMS 본문에 붙여넣으려면, 각 항목을 <li>...</li>로 감싸고 전체를 <ul> 또는 <ol>로 묶어야 합니다.
항목이 서너 개면 손으로 태그를 붙여도 금방 끝나지만, 수십 개 이상이면 다릅니다. 태그를 하나 빠뜨리거나 닫는 위치를 잘못 잡아도 브라우저는 이를 관대하게 렌더링해버려서, 문제가 한눈에 드러나지 않다가 나중에 스타일이 깨지는 식으로 발견되곤 합니다.
배열 항목이 객체인 경우는 한 단계 더 복잡합니다.
{ "name": "사과", "price": 1200 }같은 객체 배열에서 상품명만 뽑아 li로 만들려면, 매번 어떤 키의 값을 꺼낼지 판단하고 그 값만 옮겨 적어야 합니다.도구 없이 손으로 변환하는 방법
이 변환은 브라우저 개발자 도구 콘솔에서 몇 줄로 그대로 재현할 수 있습니다. 순서는 이렇습니다.
1단계 — JSON 문법을 확인합니다. 콘솔에
JSON.parse(원본텍스트)를 입력해 실행합니다. 오류 없이 값이 나오면 문법이 올바른 것이고, 오류가 뜨면 작은따옴표나 트레일링 콤마처럼 JSON 표준에 어긋나는 표기가 섞여 있다는 뜻입니다.2단계 — 배열인지 확인합니다.
Array.isArray(파싱결과)가 true인지 봅니다. false라면 중괄호로 감싸인 객체를 통째로 넣은 경우이고, 이때는 원하는 배열 부분만 다시 골라내야 합니다.li 텍스트 만들기와 최종 태그 감싸기
3단계 — 항목마다 li 텍스트를 만듭니다. 아래 코드가 이 도구와 같은 규칙입니다.
const toLiText = (item, key) => { if (typeof item === "object" && item !== null) { return item[key] !== undefined ? String(item[key]) : JSON.stringify(item); } return String(item); }; const items = parsed.map((item) => `<li>${toLiText(item, "name")}</li>`);4단계 — 바깥 태그로 감쌉니다. ul을 쓸지 ol을 쓸지 정하고, 필요하면 클래스명을 붙입니다.
const html = `<ul class="my-list">\n ${items.join("\n ")}\n</ul>`;이 네 단계를 그대로 따라가면 도구 없이도 같은 결과를 손으로 만들 수 있습니다. 다만 항목 수가 많아질수록 코드를 직접 짜고 콘솔에서 실행하는 과정 자체가 번거롭습니다.
저희 도구로 확인하기.
JSON 배열 데이터를 HTML 리스트로 렌더링설치나 회원가입 없이 브라우저에서 바로 JSON 배열을 ul/li 또는 ol/li HTML 마크업으로 변환합니다.
입력한 JSON 배열의 각 항목이 지정한 객체 키의 값으로 치환되어 li 태그가 되고, 그 결과가 ul 태그로 감싸진 모습입니다. 자주 발생하는 입력 실수
이 도구를 쓰다 보면 반복적으로 마주치는 상황이 몇 가지 있습니다. 모두 JSON 문법이나 위에서 설명한 변환 규칙으로 설명되는, 확인 가능한 동작입니다.
상황 입력 예시 결과 작은따옴표 사용 ['사과','바나나']JSON.parse 문법 오류로 변환 실패 트레일링 콤마 ["사과","바나나",]JSON.parse 문법 오류로 변환 실패 배열이 아닌 객체를 통째로 입력 {"name":"사과"}"입력값은 반드시 JSON 배열(Array) 형태여야 합니다." 오류 객체 키 명칭 오타 실제 필드는 name인데 title로 입력 지정한 값 대신 객체 전체가 JSON 문자열로 li에 출력됨 첫 번째와 두 번째 상황은 JSON 표준 문법과 관련이 있습니다. JSON은 문자열을 큰따옴표로만 허용하고, 배열이나 객체의 마지막 항목 뒤에 쉼표를 붙이는 것을 허용하지 않습니다. 자바스크립트 코드에서 흔히 쓰는 작은따옴표나 트레일링 콤마 표기를 그대로 붙여넣으면 이 규칙에 어긋나 파싱 자체가 실패합니다.
세 번째 상황은 배열과 객체를 혼동했을 때 나옵니다. API 응답이
{ "items": [...] }처럼 배열을 감싼 객체 형태라면, 바깥 중괄호까지 그대로 붙여넣지 말고 안쪽의 대괄호로 시작하는 배열 부분만 입력해야 합니다.네 번째 상황은 오해하기 쉬운 지점입니다. 키 이름을 잘못 입력하면 결과에 "undefined"라는 글자가 찍힐 거라고 예상하기 쉽지만, 이 도구는 키가 없을 때 값 대신 객체 전체를 JSON 문자열로 바꿔 li 안에 넣습니다. 그러니 li 안에 원본 객체 형태가 그대로 보인다면, 그것이 곧 키 이름이 틀렸다는 신호입니다.
정리
- 배열 항목이 문자열이면 그 값이 그대로, 객체면 지정한 "객체 키 명칭"의 값이 li 텍스트가 됩니다.
- 객체에 그 키가 없으면 값 대신 객체 전체가 JSON 문자열로 li에 들어갑니다. "undefined"가 아니라 원본 객체 형태가 보인다면 키 이름을 다시 확인할 신호입니다.
- ul/ol 선택과 클래스명 입력은 결과 마크업의 바깥 태그와 class 속성에 그대로 반영됩니다.
- 작은따옴표·트레일링 콤마는 JSON 표준에 어긋나 파싱 오류를 내고, 배열이 아닌 객체를 통째로 넣으면 별도 오류 메시지가 뜹니다.
- 입력값을 바꿔도 결과는 자동으로 갱신되지 않고, "HTML 리스트로 변환하기" 버튼을 눌러야 새로 반영됩니다.
JSON 배열 데이터를 HTML 리스트로 렌더링설치나 회원가입 없이 브라우저에서 바로 JSON 배열을 ul/li 또는 ol/li HTML 마크업으로 변환합니다.
자주 묻는 질문
문자열만 담긴 배열도 객체 키 명칭을 입력해야 하나요?
아닙니다. 항목이 문자열이나 숫자 같은 원시값이면 객체 키 명칭 입력 여부와 상관없이 값 자체가 그대로 문자열화되어 li 텍스트가 됩니다. 객체 키 명칭은 항목이 객체일 때만 적용됩니다.
ul과 ol을 한 번에 같이 만들 수 있나요?
한 번 변환할 때 결과 바깥 태그는 "리스트 종류"에서 선택한 ul 또는 ol 하나로만 만들어집니다. 두 형태가 모두 필요하면 종류를 바꿔 다시 변환해야 합니다.
li 클래스명과 ul/ol 클래스명은 따로 지정되나요?
네, 두 입력란은 서로 다른 위치에 적용됩니다. "li 클래스명"에 입력한 값은 모든 li 태그의 class 속성에 붙고, "ul/ol 클래스명"에 입력한 값은 바깥 ul 또는 ol 태그 하나에만 붙습니다.
입력값을 수정하면 결과가 바로 바뀌나요?
바로 바뀌지 않습니다. 파싱과 변환, 화면 렌더링은 모두 "HTML 리스트로 변환하기" 버튼을 눌렀을 때만 실행됩니다. 입력값을 고친 뒤에는 버튼을 다시 눌러야 결과에 반영됩니다.
- 목록 태그로 옮겨야 할 때 시간이 걸리는 이유는 문법을 몰라서가 아니라, 배열 안 항목이 문자열인지 객체인지에 따라 처리 방식이 달라지기 때문입니다. 항목 수가 많아지면 손으로