I have an object that looks like this:
storeObjects = {
furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}],
electronics: [{name: 'tv', price: 150}]
}
I also have an array of colors:
['brown', 'yellow', 'green', 'red']
Now I want to map through this object and array to create child components with those informations as props. I want to get something like this:
<ChildComponent name = 'table' price = 50 color = 'brown' />
<ChildComponent name = 'chair' price = 20 color = 'brown' />
<ChildComponent name = 'tv' price = 150 color = 'yellow' />
My point is that elements from the first key will get the first color, elements from second key will get the second color and so on
let colors = ['brown', 'yellow', 'green', 'red']
Object.keys(storeObjects).map((key, index) => {
storeObjects[key].map((obj) => {
console.log(obj.name, obj.price, colors[index])
})
})
You could use map
with index
storeObjects = { furnitures: [ { name: "table", price: 50 }, { name: "chair", price: 20 }, ], electronics: [{ name: "tv", price: 150 }], } colors = ["brown", "yellow", "green", "red"] const res = Object.keys(storeObjects).map((store, i) => storeObjects[store].map((item) => ({...item, color: colors[i], })) ).flat() console.log(res)
const Example = () => {
storeObjects = {
furnitures: [
{ name: "table", price: 50 },
{ name: "chair", price: 20 },
],
electronics: [{ name: "tv", price: 150 }],
}
colors = ["brown", "yellow", "green", "red"]
return (
<>
{Object.keys(storeObjects)
.map((store, i) =>
storeObjects[store].map((item) => ({
...item,
color: colors[i],
}))
)
.flat()
.map(({ name, price, color }) => (
<ChildComponent name={name} price={price} color={color} />
))}
</>
)
}
Traverse the keys of 'storeObjects' first and then traverse arrays of that key.
let storeObjects = { furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}], electronics: [{name: 'tv', price: 150}] } let colors = ['brown', 'yellow', 'green', 'red']; let newStoreObj = {}; let index =0; for (key in storeObjects) { newStoreObj[key] = storeObjects[key]; for(let i=0;i<newStoreObj[key].length;i++) { newStoreObj[key][i]["color"] = colors[index]; } index++; } for(key in newStoreObj){ for(let i=0;i<newStoreObj[key].length;i++) { console.log(newStoreObj[key][i]); } }
const colors = ['brown', 'yellow', 'green', 'red'];
const storeObjects = {
furnitures: [{name: 'table', price: 50}, {name: 'chair', price: 20}],
electronics: [{name: 'tv', price: 150}]
}
function serializeObj(storeObjects, colors) {
return Object.keys(storeObjects)
.map(item => storeObjects[item])
.reduce((acc, cur, index) => {
if (Array.isArray(cur)) {
cur.map(obj => obj.color = colors[index])
return acc.concat(cur)
} else {
return acc.push(cur)
}
}, [])
}
// run function
serializeObj(storeObjects, colors)
// you get result
// [{name: "table", price: 50, color: "brown"}, {name: "chair", price: 20, color: "brown"}, {name: "tv", price: 150, color: "yellow"}]
// then you map the result obj and get the virtual dom
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.