지역별 시군구 리스트 데이터 재가공하기

유치원 Open Api를 활용하면서 작성하는 글.

두개의 Select 옵션이 존재한다. 

첫번째의 Select에서 "서울특별시"를 선택하면, 두번째의 Select option 리스트에는 "서울특별시"에만 존재하는 "구" 이름이 나열되어야한다.

우선, 아래와 같은 자료형이 존재한다. 

const arr = [
 {
  "시도시군구코드.xls": "서울특별시",
  "Column2": 11,
  "Column3": "중구",
  "Column4": 11140
 },
 {
  "시도시군구코드.xls": "서울특별시",
  "Column2": 11,
  "Column3": "영등포구",
  "Column4": 11560
 },
 {
  "시도시군구코드.xls": "서울특별시",
  "Column2": 11,
  "Column3": "중랑구",
  "Column4": 11260
 },
 
  ...
  
 ];

확인해보면 "서울특별시"라는 key name이 중복되고, 그 안에 속해있는 군/구 이름이 나열되어있다.

[{name:"서울특별시", sigungu:[{name:"강남구"}, {name:"서초구"}, ...]}, {...}] 와 같은 형식으로 arr 배열을 수정하면 활용도가 높아질 것 같다.

const result = [];

arr.forEach(element => {
  const sidoName = element['시도시군구코드.xls'];
  const sigunguName = element['Column3'];
  
  // result에서 해당 sidoName을 찾는다.
  // 초기화한 result 변수는 빈배열로 선언했기 때문에 당연히 sidoObj도 없을것이다.
  let sidoObj = result.find(item => item.name === sidoName);
  
  // sidoName이 result에 없으면 새로운 객체를 추가한다.
  if (!sidoObj) {
    sidoObj = { name: sidoName, sigungu: [] };
    result.push(sidoObj);
  }
  
  // 해당 sidoName의 sigungu 배열에 sigunguName을 추가한다.
  sidoObj.sigungu.push({ name: sigunguName });
});

console.log('result', result)

다음과 같이 보기좋게 데이터가 정리되었다!