Array 재구성

API 사용중 같은 값을 그룹화하면 좋을 것 같다는 생각을 간혹하게 되는데 이번 날씨 API를 사용하면서 그런생각이 들었다.

단기 예보를 불러오게 되면 거의 700개 이상의 object가 나온다.  각기 다른 날씨속성 12개의 카테고리로 한 줄씩 나오며 그 12개의 카테고리는 같은 예보시간이 들어있다. 

0: {baseDate: '20240922', baseTime: '2000', category: 'TMP', fcstDate: '20240922', fcstTime: '2100', …}
1: {baseDate: '20240922', baseTime: '2000', category: 'UUU', fcstDate: '20240922', fcstTime: '2100', …}
2: {baseDate: '20240922', baseTime: '2000', category: 'VVV', fcstDate: '20240922', fcstTime: '2100', …}
3: {baseDate: '20240922', baseTime: '2000', category: 'VEC', fcstDate: '20240922', fcstTime: '2100', …}
4: {baseDate: '20240922', baseTime: '2000', category: 'WSD', fcstDate: '20240922', fcstTime: '2100', …}
5: {baseDate: '20240922', baseTime: '2000', category: 'SKY', fcstDate: '20240922', fcstTime: '2100', …}
6: {baseDate: '20240922', baseTime: '2000', category: 'PTY', fcstDate: '20240922', fcstTime: '2100', …}
7: {baseDate: '20240922', baseTime: '2000', category: 'POP', fcstDate: '20240922', fcstTime: '2100', …}
8: {baseDate: '20240922', baseTime: '2000', category: 'WAV', fcstDate: '20240922', fcstTime: '2100', …}
9: {baseDate: '20240922', baseTime: '2000', category: 'PCP', fcstDate: '20240922', fcstTime: '2100', …}
10: {baseDate: '20240922', baseTime: '2000', category: 'REH', fcstDate: '20240922', fcstTime: '2100', …}
11: {baseDate: '20240922', baseTime: '2000', category: 'SNO', fcstDate: '20240922', fcstTime: '2100', …}
12: {baseDate: '20240922', baseTime: '2000', category: 'TMP', fcstDate: '20240922', fcstTime: '2200', …}
13: {baseDate: '20240922', baseTime: '2000', category: 'UUU', fcstDate: '20240922', fcstTime: '2200', …}
14: {baseDate: '20240922', baseTime: '2000', category: 'VVV', fcstDate: '20240922', fcstTime: '2200', …}
15: {baseDate: '20240922', baseTime: '2000', category: 'VEC', fcstDate: '20240922', fcstTime: '2200', …}
16: {baseDate: '20240922', baseTime: '2000', category: 'WSD', fcstDate: '20240922', fcstTime: '2200', …}
17: {baseDate: '20240922', baseTime: '2000', category: 'SKY', fcstDate: '20240922', fcstTime: '2200', …}
18: {baseDate: '20240922', baseTime: '2000', category: 'PTY', fcstDate: '20240922', fcstTime: '2200', …}
19: {baseDate: '20240922', baseTime: '2000', category: 'POP', fcstDate: '20240922', fcstTime: '2200', …}
20: {baseDate: '20240922', baseTime: '2000', category: 'WAV', fcstDate: '20240922', fcstTime: '2200', …}
21: {baseDate: '20240922', baseTime: '2000', category: 'PCP', fcstDate: '20240922', fcstTime: '2200', …}
22: {baseDate: '20240922', baseTime: '2000', category: 'REH', fcstDate: '20240922', fcstTime: '2200', …}
23: {baseDate: '20240922', baseTime: '2000', category: 'SNO', fcstDate: '20240922', fcstTime: '2200', …}
24: {baseDate: '20240922', baseTime: '2000', category: 'TMP', fcstDate: '20240922', fcstTime: '2300', …}
25: {baseDate: '20240922', baseTime: '2000', category: 'UUU', fcstDate: '20240922', fcstTime: '2300', …}
26: {baseDate: '20240922', baseTime: '2000', category: 'VVV', fcstDate: '20240922', fcstTime: '2300', …}
27: {baseDate: '20240922', baseTime: '2000', category: 'VEC', fcstDate: '20240922', fcstTime: '2300', …}
28: {baseDate: '20240922', baseTime: '2000', category: 'WSD', fcstDate: '20240922', fcstTime: '2300', …}
29: {baseDate: '20240922', baseTime: '2000', category: 'SKY', fcstDate: '20240922', fcstTime: '2300', …}
30: {baseDate: '20240922', baseTime: '2000', category: 'PTY', fcstDate: '20240922', fcstTime: '2300', …}
31: {baseDate: '20240922', baseTime: '2000', category: 'POP', fcstDate: '20240922', fcstTime: '2300', …}
32: {baseDate: '20240922', baseTime: '2000', category: 'WAV', fcstDate: '20240922', fcstTime: '2300', …}
33: {baseDate: '20240922', baseTime: '2000', category: 'PCP', fcstDate: '20240922', fcstTime: '2300', …}
34: {baseDate: '20240922', baseTime: '2000', category: 'REH', fcstDate: '20240922', fcstTime: '2300', …}
35: {baseDate: '20240922', baseTime: '2000', category: 'SNO', fcstDate: '20240922', fcstTime: '2300', …}

 

이것을 새로 배열을 구성하기 위해서 forEach문을 사용하였다.

일단 빈배열을 만들어주고 그 배열에 구성을 해주고 리턴해주면 된다. 

import type {
  INewForeCastType,
  IWeatherTodayTomorrowTypes,
} from "~/types/apiType";

export const createNewArr = ({
  data,
  newWeatherData,
}: {
  data: IWeatherTodayTomorrowTypes[];
  newWeatherData: globalThis.Ref<INewForeCastType[]>;
}) => {
  const newArr: INewForeCastType[] = [];
  data.forEach(({fcstTime, category, fcstValue}) => {
    let exist = newArr.find((entry) => entry.fcstTime === fcstTime);

    if (!exist) {
      exist = {
        fcstTime: fcstTime,
      };
      newArr.push(exist);
    }
    if (category === "POP") {
      exist.POP = fcstValue;
    }
    if (category === "PCP") {
      exist.PCP = fcstValue;
    }
    if (category === "PTY") {
      exist.PTY = fcstValue;
    }
    if (category === "REH") {
      exist.REH = fcstValue;
    }
    if (category === "SKY") {
      exist.SKY = fcstValue;
    }
    if (category === "SNO") {
      exist.SNO = fcstValue;
    }
    if (category === "TMP") {
      exist.TMP = fcstValue;
    }
    if (category === "UUU") {
      exist.UUU = fcstValue;
    }
    if (category === "VEC") {
      exist.VEC = fcstValue;
    }
    if (category === "VVV") {
      exist.VVV = fcstValue;
    }
    if (category === "WAV") {
      exist.WAV = fcstValue;
    }
    if (category === "WSD") {
      exist.WSD = fcstValue;
    }
  });
  return (newWeatherData.value = newArr);
};