en realidad he devuelto 2 tipos de resultados de 1 llamada API
{ "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" } } }, ] }desde el regreso, todos son Objeto, por lo que necesito hacer una conversión a Array para imprimirlos en mi interfaz con .map, así que uso esto
const convertObjToArr = (responseObj) => { let arr = [] Object.keys(responseObj).forEach(function(key) { arr.push(responseObj[key]); }); return arr } convertObjToArr(data.data1) convertObjToArr(data.data2)sin embargo, mi data2 tiene otro objeto dentro que también se llama "otra_condición" que no se está convirtiendo en Array y todavía está en Object. Cuando traté de mostrarlo con .map, me da error. En este caso, ¿cómo puedo manejar ese objeto en la matriz? ¿Hay alguna forma de convertirlos todos en Array independientemente de cuántos objetos anidados tenga en un solo dato?
¿Esto ayuda?
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>