Create and group new array from object and arrays

Question

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],
  }]

Answer 1

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)