I have an item object and each key is ID of item characteristic (color, size or material). Their values are also ID's of the characteristic value (red, blue, etc.) I want to group each characteristic with its values (like in resultArray). I tried to use reduce function but I can't get the desired result. Can you give me a hint what methods to use to get this result?
itemAttributes = { "11": [ 19,20 ], "12": [ 21, 22, 23], "13": [ 25, 26, 27 ]}
arr1 =[
{title: "colors", "id": 11 },
{title: "sizes", "id": 12 },
{title: "materials", "id": 13 }
]
arr2=[
{title: "red", "attribute": 11, id: 19 },
{title: "blue", "attribute": 11, id: 20 },
{title: "10x20", "attribute": 12, id: 21 },
{title: "10x30", "attribute": 12, id: 22 },
{title: "10x40", "attribute": 12, id: 23 },
{title: "10x50", "attribute": 12, id: 24 },
{title: "metals", "attribute": 13, id: 25 },
{title: "polymers", "attribute": 13, id: 26 },
{title: "ceramics", "attribute": 13, id: 27 },
]
resultArray = [
{
title: colors,
items: [red, blue],
},
{
title: sizes,
items: [10x20, 10x30, 10x40],
},
{
title: materials,
items: [metals, polymers, ceramics],
}]
The shortest I can come up was with a map combined with an inner filter+map.
Since it is a transformation of arr1, map can be used. Inside I'm filtering from arr2 the needed items and then transforming the filtered items to return an array of just titles
let itemAttributes = { "11": [ 19,20 ], "12": [ 21, 22, 23], "13": [ 25, 26, 27 ]}
let arr1 =[
{title: "colors", "id": 11 },
{title: "sizes", "id": 12 },
{title: "materials", "id": 13 }
]
let arr2=[
{title: "red", "attribute": 11, id: 19 },
{title: "blue", "attribute": 11, id: 20 },
{title: "10x20", "attribute": 12, id: 21 },
{title: "10x30", "attribute": 12, id: 22 },
{title: "10x40", "attribute": 12, id: 23 },
{title: "10x50", "attribute": 12, id: 24 },
{title: "metals", "attribute": 13, id: 25 },
{title: "polymers", "attribute": 13, id: 26 },
{title: "ceramics", "attribute": 13, id: 27 },
]
const res = arr1.map(({title,id}) => {
const attrIds = itemAttributes[id]
const items = arr2.filter(({id}) => attrIds.includes(id)).map(({title}) => title)
return {title,items}
})
console.log(res)let itemAttributes = { "11": [ 19,20 ], "12": [ 21, 22, 23], "13": [ 25, 26, 27 ]}
let arr1 =[
{title: "colors", "id": 11 },
{title: "sizes", "id": 12 },
{title: "materials", "id": 13 }
]
let arr2=[
{title: "red", "attribute": 11, id: 19 },
{title: "blue", "attribute": 11, id: 20 },
{title: "10x20", "attribute": 12, id: 21 },
{title: "10x30", "attribute": 12, id: 22 },
{title: "10x40", "attribute": 12, id: 23 },
{title: "10x50", "attribute": 12, id: 24 },
{title: "metals", "attribute": 13, id: 25 },
{title: "polymers", "attribute": 13, id: 26 },
{title: "ceramics", "attribute": 13, id: 27 },
]
let resultArray = [];
arr1.map((atr) => {
let filters = itemAttributes[atr.id];
let toPush = {
title: atr.title,
items: []
};
arr2.map((item) => {
if(item.attribute === atr.id && filters.includes(item.id))
toPush.items.push(item.title)
});
resultArray.push(toPush);
})
console.log(resultArray)