[JavaScript] Object의 key와 value를 map함수를 써서 출력하기

const dataArray = [
    {
      "orderCode": "0001",
      "orderDetails": {
        "메뉴이름31": 1,
        "메뉴이름35": 1,
        "메뉴이름36": 1,
        "메뉴이름40": 1,
        "메뉴이름41": 1,
      }
    },
];

이런 형태의 JSON 파일이 있다고 해보자. 여기서 나는 "메뉴이름31": 1을 빼오고 싶었다. 아니 그냥 map함수를 돌면서 안에 있는 값들을 전부 빼오고 싶었다. 그래서 그냥 단순하게 아래와 같이 뽑아오면 될 거라고 생각했다.

{dataArray.map((data) => (
  <div>{data.orderCode}</div>
  <div>{data.orderDetails}</div>
)};​

근데 에러가 뜨는 것이었다. 생각해보니 data.orderDetails는 또 사전식 데이터이기때문에 저런 식으로 빼올 수가 없었다.

그래서 map함수 안에서 다시한번 orderDetails에 대한 map함수를 돌면 되지 않을까 라는 생각이 들어서 아래와 같은 방식으로 2중 map함수를 구현하면 되지 않을까 싶었는데 그것도 안됐다.

{dataArray.map((data) => (
  <div>{data.orderCode}</div>
  {ordered.orderDetails.map((a) => (
    <div>{a}</div>
  ))}
)}

그래서 찾아본 결과 Object.entries를 사용하면 된단다.

Object.entries(ordered.orderDetails).map(([key, value]) => <div>{key} {value}</div>)​

이런식으로 말이다. 정확히는

{OrderedArray.map((data) => (
  {Object.entries(data.orderDetails).map(([key, value]) => (
    <div>
      <div>{key}</div>
      <div>{value}EA</div>
    </div>
  ))}
);​

이런식으로 뽑아오면 된다.

그러면 위 사진과 같이 잘 출력되는 것을 확인할 수 있다.

이걸 접하게 된 계기가 API 통신을 하면서 배열 내에 또다시 배열이 있는 dataArray와 같은 형태의 데이터를 뿌려줘야 하는 상황이 생겼던 것인데, 아직 좀 부족한 것 같다고 느꼈다. 😢