在另一个对象中获取对象属性的值（描述）

Question

I have to array of objects which can be related to each other through CategoryId. like below code:

const Category = [
    { ID: 100 , Description: Cate1}, 
    {ID: 101 , Description: Cate2}
]
const Items = [ 
    {ID: 2001, CategoryID: 100, Desc: Item1 }, 
    {ID: 2002, CategoryID: 100, Desc: Item2 }, 
    {ID: 2003, CategoryID: 101, Desc: Item3 }, 
]

I am going to distribute items by the use of map method in lis that are summarized in their own ul according to the category descriptions that are extracted from category id which exists in both arrays. For example:

Cate1 > ul
  item1 > li
  item2 > li
Cate2 > ul
  item3 > li

. . . How can I tackle this issue with Javascript or ES6/7/8?

Answer 1

You can look at each category and for each one filter() the matching items. This is easy, but will be a little slow if you have lots of data because you loop though the item list every time:

 const Category = [{ ID: 100 , Description: 'Cate1'}, {ID: 101 , Description: 'Cate2'}] const Items = [ {ID: 2001, 'CategoryID': 100, Desc: 'Item1' }, {ID: 2002, 'CategoryID': 100, Desc: 'Item2' }, {ID: 2003, 'CategoryID': 101, Desc: 'Item3' }, ] Category.forEach(cat => { console.log('ul> '+cat.Description) Items.filter(item => item.CategoryID === cat.ID) .forEach(item => console.log(' li> ' + item.Desc)) }) 

Alternatively you can build a lookup table for your items base on ID once, and then use it to find the items in constant time. This will be faster with larger data, but requires a little more work upfront:

 const Category = [{ ID: 100 , Description: 'Cate1'}, {ID: 101 , Description: 'Cate2'}] const Items = [ {ID: 2001, 'CategoryID': 100, Desc: 'Item1' }, {ID: 2002, 'CategoryID': 100, Desc: 'Item2' }, {ID: 2003, 'CategoryID': 101, Desc: 'Item3' }, ] let lookup = Items.reduce((a, c) => { (a[c.CategoryID] || (a[c.CategoryID] = [])).push(c) return a }, {}) Category.forEach(cat => { console.log('ul> '+cat.Description) lookup[cat.ID] .forEach(item => console.log(' li> ' + item.Desc)) })