JavaScript에서 키 값을 기준으로 JSON 데이터 그룹화하기

데이터를 다루다 보면 특정 키 값을 기준으로 JSON 배열을 재구성해야 하는 경우가 자주 발생합니다. 예를 들어, 다음과 같은 JSON 배열이 있다고 가정해 보겠습니다.

const arr = [{
   "data": [
      { "W": 1, "A1": "123" },
      { "W": 1, "A1": "456" },
      { "W": 2, "A1": "4578" },
      { "W": 2, "A1": "2423" },
      { "W": 2, "A1": "2432" },
      { "W": 2, "A1": "24324" }
   ]
}];

여기서 우리가 만들고자 하는 것은 W 키의 값(1, 2)을 기준으로 각 객체를 묶어, 아래와 같은 새로운 JSON 배열로 변환하는 것입니다.

[
   {
       "1": [
           {
               "A1": "123"
           },
           {
               "A1": "456"
           }
       ]
   },
   {
       "2": [
           {
               "A1": "4578"
           },
           {
               "A1": "2423"
           },
           {
               "A1": "2432"
           },
           {
               "A1": "24324"
           }
       ]
   }
];

해결 방법

이 문제는 JavaScript의 Array.prototype.reduce() 메서드를 활용하면 깔끔하게 해결할 수 있습니다. 처리 과정은 크게 두 단계로 나눌 수 있습니다.

첫 번째 단계에서는 data 배열을 순회하면서 W 값을 기준으로 객체들을 분류합니다. 이때 acc[val.W] = acc[val.W] || [] 패턴을 사용하면, 해당 키가 아직 없을 때만 빈 배열을 초기화하고 기존 키가 있으면 그대로 재사용할 수 있습니다. 각 항목에서는 필요한 A1 값만 추출해 저장합니다.

두 번째 단계에서는 Object.keys()로 분류된 키 목록을 가져온 뒤, 다시 한번 reduce()를 적용해 { "키": [배열] } 형태의 객체들을 요소로 갖는 최종 배열을 만들어냅니다.

예제 코드

const arr = [{
   "data": [
      { "W": 1, "A1": "123" },
      { "W": 1, "A1": "456" },
      { "W": 2, "A1": "4578" },
      { "W": 2, "A1": "2423" },
      { "W": 2, "A1": "2432" },
      { "W": 2, "A1": "24324" }
   ]
}];
const groupJSON = (arr = []) => {
   const preCombined = arr[0].data.reduce((acc, val) => {
      acc[val.W] = acc[val.W] || [];
      acc[val.W].push({ A1: val.A1 });
      return acc;
   }, {});
   const combined = Object.keys(preCombined).reduce((acc, val) => {
      const temp = {};
      temp[val] = preCombined[val];
      acc.push(temp);
      return acc;
   }, []);
   return combined;
};
console.log(JSON.stringify(groupJSON(arr), undefined, 4));

마지막에 JSON.stringify()에 세 번째 인자로 4를 전달하면, 출력 결과가 4칸 들여쓰기가 적용된 보기 좋은 형태로 정렬됩니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[
   {
       "1": [
           {
               "A1": "123"
           },
           {
               "A1": "456"
           }
       ]
   },
   {
       "2": [
           {
               "A1": "4578"
           },
           {
               "A1": "2423"
           },
           {
               "A1": "2432"
           },
           {
               "A1": "24324"
           }
       ]
   }
]

이처럼 reduce()를 두 단계로 조합하면 별도의 외부 라이브러리 없이도 순수 JavaScript만으로 JSON 데이터를 원하는 키 기준으로 손쉽게 그룹화할 수 있습니다. 실무에서는 API 응답 데이터를 카테고리별·날짜별로 정리할 때 이러한 패턴이 매우 유용하게 활용됩니다.