개요
JavaScript에서 객체 내부에 중첩된 객체 배열을 처리해야 할 때, map() 또는 forEach() 메서드를 활용하면 각 요소에 쉽게 접근할 수 있습니다. 이 글에서는 중첩된 JSON 구조를 순회하면서 데이터를 추출하는 방법을 실제 예제와 함께 살펴보겠습니다.
map()과 forEach()의 차이점
forEach()는 배열의 각 요소에 대해 주어진 함수를 실행하기만 할 뿐 반환값이 없습니다. 반면 map()은 각 요소를 변환한 결과로 새로운 배열을 반환합니다. 따라서 단순히 데이터를 출력하거나 부수 효과(side effect)만 필요하다면 forEach(), 변환된 결과를 새 배열로 만들어야 한다면 map()을 사용하는 것이 좋습니다.
예제 코드
아래 코드는 객체 내부의 객체 배열을 map()과 forEach()를 조합해 파싱하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Parse array of objects inside object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to parse the json object</h3>
<script>
let json = {
storeData: [
{
items: [
{
itemID: 12,
cost: {
costNum: 100,
},
},
{
itemID: 22,
cost: {
costNum: 250,
},
},
{
itemID: 19,
cost: {
costNum: 350,
},
},
],
},
],
};
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let sum = 0;
json.storeData.map((ele) => ({
itemPrice: ele.items.forEach((item) => {
resEle.innerHTML +=
"itemID : " +
item.itemID +
" : costNum : " +
item.cost.costNum +
"<br>";
}),
}));
});
</script>
</body>
</html>
코드 동작 방식
- json.storeData.map(...) : 최상위 storeData 배열을 순회하며 각 매장 데이터에 접근합니다.
- ele.items.forEach(...) : 각 매장 데이터 안에 중첩된 items 배열을 반복 처리합니다.
- item.cost.costNum : 중첩된 cost 객체 안의 가격 정보에 접근해 값을 읽어옵니다.
출력 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 각 항목의 itemID와 costNum이 아래와 같이 화면에 출력됩니다.
