使用.map将对象与数组在前端打印出来

Question

实际上，我从一个API调用中返回了2种结果。

{
    "data1": [
        {
            "item_name": "item 4",
            "price_updated_date": "2022-04-14T08:05:16.339Z",
            "item_img_id": "https://testing.jpg",
            "set_name": "2017",
            "set_tag": "mm3",
            "rarity": "rare",
            "price_normal": 34.99,
            "price_foil": 54.99
        },
    ],
    "data2": [
        {
            "item_condition": "NM",
            "item_img": "https://test.jpg",
            "item_name": "item 1",
            "item_set": "ZEN",
            "item_language": "JP",
            "item_type": "Non Foil",
            "item_price": "¥ 4,580",
            "item_qty": 9,
            "other_condition": {
                "SP": {
                    "qty": 1,
                    "price": "¥ 3,670"
                },
                "MP": {
                    "qty": 1,
                    "price": "¥ 3,210"
                }
            }
        },
        {
            "item_condition": "NM",
            "item_img": "https://0010.jpg",
            "item_name": "item 3",
            "item_set": "ZNE",
            "item_language": "JP",
            "item_type": "Non Foil",
            "item_price": "¥ 8,000",
            "item_qty": 6,
            "other_condition": {
                "MP": {
                    "qty": 1,
                    "price": "¥ 6,400"
                }
            }
        },
        
    ]
}

返回时，它们都是对象，所以我需要将它们转换为数组，以便用.map在我的前端打印它们，所以我使用以下方法

  const convertObjToArr = (responseObj) => {
        let arr = []
        Object.keys(responseObj).forEach(function(key) {
            arr.push(responseObj[key]);
        });
        return arr
  }
convertObjToArr(data.data1)
convertObjToArr(data.data2)

但是，我的data2中还有另一个对象叫做"other_condition“，它不是转换为数组，而是仍然在对象中。当我试图用.map显示它时，它会给我带来错误。在这种情况下，如何处理要数组的对象？是否有任何方法将它们全部转换为Array，而不管我在一个数据中有多少嵌套对象？

Answer 1

这个有用吗？

​

const renderThisItem = itm => {
/*console.log(
  'itm: ', itm,
  'typeof: ', typeof itm,
  'keys: ', Object.keys(itm)
);*/
  if (itm) {
    if (typeof itm === 'string' || typeof itm === 'number') {
      return (<div>{itm},</div>);
    } else if (Array.isArray(itm)) {
      return (
        <div>[{
          itm.map(it => renderThisItem(it))
        }],</div>
      )
    } else if (Object.keys(itm).length > 0) {
      return (
        <div>{"{"} {
          Object.entries(itm)
          .map(([k, v]) => (
            <div>
              <div class="val">{k}: {renderThisItem(v)}</div>
            </div>
          ))
        } {"},"}</div>
      )
    }
  };
};

const Thingy = ({ dataObj, ...props }) => {
  return (
    <div>{renderThisItem(dataObj)}</div>
  );
};

const rawData = {
    "data1": [
        {
            "item_name": "item 4",
            "price_updated_date": "2022-04-14T08:05:16.339Z",
            "item_img_id": "https://testing.jpg",
            "set_name": "2017",
            "set_tag": "mm3",
            "rarity": "rare",
            "price_normal": 34.99,
            "price_foil": 54.99
        },
    ],
    "data2": [
        {
            "item_condition": "NM",
            "item_img": "https://test.jpg",
            "item_name": "item 1",
            "item_set": "ZEN",
            "item_language": "JP",
            "item_type": "Non Foil",
            "item_price": "¥ 4,580",
            "item_qty": 9,
            "other_condition": {
                "SP": {
                    "qty": 1,
                    "price": "¥ 3,670"
                },
                "MP": {
                    "qty": 1,
                    "price": "¥ 3,210"
                }
            }
        },
        {
            "item_condition": "NM",
            "item_img": "https://0010.jpg",
            "item_name": "item 3",
            "item_set": "ZNE",
            "item_language": "JP",
            "item_type": "Non Foil",
            "item_price": "¥ 8,000",
            "item_qty": 6,
            "other_condition": {
                "MP": {
                    "qty": 1,
                    "price": "¥ 6,400"
                }
            }
        },
        
    ]
};

ReactDOM.render(
  <div>
    DEMO
    <Thingy dataObj={rawData} />
  </div>,
  document.getElementById('rd')
);

.val { display: flex; }

<div id="rd" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

​