Object 를 Array로 바꾸기 (React, JS)

Object 를 Array로 바꾸기 (React, JS)

 

 

 

졸업 프로젝트를 진행하면서 머신러닝 쪽을 통해서 데이터 받을 일이 생겼었다. 

(원래는 머신러닝 > 백엔드 > 프론트엔드 순으로 전달했어야 했지만, 백엔드팀에서 기한내 구현을 못해가지고 프론트인 내가 직접 데이터를 받아 처리했다.)

 

대충, JSON 형식으로 캠핑장 데이터들을 전달 받는거였는데, 내가 짜둔 로직은 map 을 사용해서 JSON id 값에 따라 처리하는 코드이다.

 

근데 이 과정에서 머신러닝 파트 분이 Object 형식으로 데이터를 그대로 전달을 하였고, 내가 이걸 Array로 바꿔서 처리를 해야하는 상황.

 

대충, { { "id": 1, ... }, { "id": 2, ...  }, .... ,{ "id": 50, ... } } 이런식으로 데이터가 전달되어서 프론트에서는 이것을 Object로 인식해버린다.

 

구글링을 해보니 js에서 object 를 array로 바꾸어주는 Object.entries() 와 같은 함수가 존재하기는 하지만, 데이터가 이상하게 변해버리는 바람에 사용할 수 없었다.

 

그래서 직접 양쪽 { } 를 [ ] 로 바꿔야했다.

 

진짜, 별거 아니지만 생각보다 구현이 잘안되었고 몇시간정도 구글링을 해보고 여러가지 시도를 해봐서 결국 해결한 내용이다.

 

 

내가 짰던 코드이다. 여기서 참고할 필요가 없는 코드들은 주석처리해두었으니 무시하자.

 

await camp2는 머신러닝을 통해서 데이터를 GET 하는 코드이다. 

 

이걸 cam 이라는 변수에 할당해주고 (현재 cam은 Object 이다.)

 

그 객체의 키값의 갯수를 count라는 변수에 할당한다.

 

이후 for 문을 통해 위해서 선언한 sor 이라는 [] 빈 배열에 하나씩 넣어주고 

 

setItems 라는 useState를 통해 값을 items 에 입력해 주었다.

 

이제 이 items를 가지고 map을 돌려보면 잘 처리된다.