data 를 가공해보자

회사 dash board 프로젝트 진행 중 rest-api를 통해 받아온 값중에 내가 필요한 값이 없어서 data를 가공해 추가해보기로 했다

data는 배열 안에 객체의 형태로 되어 들어왔고 352개의 객체들에게

index: 352

이런식으로 값을 추가해주어야했다
숫자는 참고로 1~ 352 를 차례로 넣어주어야 한다

js의 map과 fill 메서드를 이용했고 ... 스프레드 연산자를 이용했다

그럼 내가 해결한 코드를 적어보게따!!

---

📌 data 가져오기

const getData = (API: string) => async () => {
    try {
      const response = await axios.get(`/api${API}`);
      setData(response.data);
    } catch (error) {
      console.log(error);
    }
  };

데이터를 불러와서 state에 담아주었고

📌 새 배열 안에 값 추가하기

const RowNum = new Array(data?.length)
    .fill(null)
    .map((el, i) => {
      return i + 1;
    })
    .reverse();

배열의 길이 만큼 새로운 배열을 만들었고 그 안에 먼저 fill 을 통해 null 값을 채워주었다
(다른 블로그들에서는 null을 안채워도 동작하던데 나는 null을 채워주어야 빨간 줄이 안생겼다 ...!)
map을 통해 배열안 각각의 요소들을 i+1 한 값으로 채워

[1, 2, 3, 4,......,352]

이런 형태로 만들어주었다

하지만 나는 여기서 거꾸로된 형태가 필요해 reverse 를 사용 배열 안의 값을 뒤집어 주었다!

[352, 351, 350, 349,......,1]

절반 왔다!!
새로운 값을 아까 불러온 data 안에 넣어줄 차례이다

📌 data 가공하기

const newData = data?.map((el, i) => {
    return { ...el, index: RowNum };
  });

data를 차례로 map을 돌며 ...를 통해 기존의 값은 유지하되 index: 352 key:value의 형태를 추가하기 위해

key = index
value = RowNum

을 적어주었더니 배열안에 값이 추가 되었다!!

해결.

전체 코드

const getData = (API: string) => async () => {
    try {
      const response = await axios.get(`/api${API}`);
      setData(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  const RowNum = new Array(data?.length)
    .fill(null)
    .map((el, i) => {
      return i + 1;
    })
    .reverse();

  const newData = data?.map((el, i) => {
    return { ...el, index: RowNum };
  });

얼핏 보기엔 간단해보이는 이코드,,, 사수님께서 보내주신 블로그들을 살펴보며 30분여 만에 해결했다...!

---

참고
https://cheershennah.tistory.com/224
https://heewon26.tistory.com/215