如何使用angular6在基于id值的第一个数组对象中添加第二个数组对象？

Question

This is my code

 categories = [{"id":"101","name":"category1"},{"id":"102","name":"category2"},{"id":"103","name":"category3"},{"id":"104","name":"category4"}]; actions = [{"id":"201","name":"action1","category_id":"101"},{"id":"202","name":"action2","category_id":"101"},{"id":"203","name":"action3","category_id":"102"},{"id":"204","name":"action4","category_id":"104"}]; 

In the above categories array id value is existed in actions array. so i want to combine the two arrays into one array like the output as follows.

Output:-

 finalList = [{"id":"101","name":"category1","actions":[{"id":"201","name":"action1","category_id":"101"},{"id":"202","name":"action2","category_id":"101"}]},{"id":"102","name":"category2","actions":[{"id":"203","name":"action3","category_id":"102"}]},{"id":"103","name":"category3","actions":[]},{"id":"104","name":"category4","actions":[{"id":"204","name":"action4","category_id":"104"}]}] 

Answer 1

use the map function along with the filter

 var categories = [{"id":"101","name":"category1"},{"id":"102","name":"category2"},{"id":"103","name":"category3"},{"id":"104","name":"category4"}]; var actions = [{"id":"201","name":"action1","category_id":"101"},{"id":"202","name":"action2","category_id":"101"},{"id":"203","name":"action3","category_id":"102"},{"id":"204","name":"action4","category_id":"104"}]; var result = categories.map((item) => { item.action = actions.filter( ac => item.id === ac. category_id) return item; }) console.log(result) 

Answer 2

for each category find action elements and add then to category object

this.categories.forEach((element) => {
    element['actions'] = this.actions.filter((data) => data.category_id === element.id);
});
console.log(this.categories);

Answer 3

You can simply use Array.reduce() to create a map of actions ,group by category Id . And than you can use Array.map() on the categories to get the desired result. The overall time complexity of this solution will be O(n) .

 let categories = [{"id":"101","name":"category1"},{"id":"102","name":"category2"},{"id":"103","name":"category3"},{"id":"104","name":"category4"}]; let actions = [{"id":"201","name":"action1","category_id":"101"},{"id":"202","name":"action2","category_id":"101"},{"id":"203","name":"action3","category_id":"102"},{"id":"204","name":"action4","category_id":"104"}]; let map = actions.reduce((a,curr)=>{ (a[curr.category_id] = a[curr.category_id] || []).push(curr); return a; },{}); let result = categories.map((o)=>{ o.actions = map[o.id] || []; return o; }); console.log(result); 

Answer 4

   // Use simple for loop along with filter 
categories = [{"id":"101","name":"category1"},{"id":"102","name":"category2"},{"id":"103","name":"category3"},{"id":"104","name":"category4"}];

actions = [{"id":"201","name":"action1","category_id":"101"},{"id":"202","name":"action2","category_id":"101"},{"id":"203","name":"action3","category_id":"102"},{"id":"204","name":"action4","category_id":"104"}];

    for(var i=0;i<categories.length;i++){
        categories[i]['actions'] = actions.filter((data) => data.category_id === categories[i].id);
    };
    console.log(categories)

Answer 5

I am using for loops working fine.

 for(var i=0;i<categories.length;i++) { categories[i]["actions"]=[]; for(var j=0;j<actions.length;j++) { if(categories[i].id==actions[j].category_id){ categories[i]["actions"].push(actions[j]); } } } 

Any other approach without using for loops?