i actually have return 2 types of result from 1 API call
{
"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"
}
}
},
]
}
from the return, they are all Object, so i need to make a conversion to Array in order to print them out on my frontend with .map so i use this
const convertObjToArr = (responseObj) => {
let arr = []
Object.keys(responseObj).forEach(function(key) {
arr.push(responseObj[key]);
});
return arr
}
convertObjToArr(data.data1)
convertObjToArr(data.data2)
however, my data2 has another object inside it as well call "other_condition" which is not converting to Array and is still in Object. When i tried to display it with .map, it gives me error. In this case, how can i handle that object to array? is there any way to convert all of them into Array regardless how many nested object i have in one data?
Does this help?
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>