Lodash Js create a tree structure with arrays and objects

Question

I'm trying to create a Lodash Tree like Arrays and Object. I have two arrays(like category and products) with a common key. Need to form a Tree structure with string index.

let categories = [{ 
    id: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    category: 'category c227',
  },{
    id: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
    category: 'category 81aa',
  }
];
let products = [{
    mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
    pName: 'product 1 c227', 
}, {
    mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
    pName: 'product 2 c227', 
}, {
    mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    pName: 'product 1 81aa', 
}, {
    mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    pName: 'product 2 81aa', 
},{
    mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    pName: 'product 3 81aa',
}];

Need the structure like

[
   {
      "category": { id, category}, 
      "products ": [
             { mId, pName },
             { mId, pName },
             { mId, pName }
       ]
   },{
      "category": { id, category}, 
      "products ": [
             { mId, pName },
             { mId, pName },
             { mId, pName }
       ]
   },
]

I tried and get that corresponding products of the categories. But need help to follow the above structure.

let arrResult = _.map(categories, function(s) {
    console.log(s);
    return _.filter(products, function(i) {
        return _.isEqual(s.id, i.mId);
    });
});

console.log(arrResult);

Console result is:

{ id: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
  category: 'category c227' }
{ id: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
  category: 'category 81aa' }
[ [ { mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
      pName: 'product 1 81aa' },
    { mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
      pName: 'product 2 81aa' },
    { mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
      pName: 'product 3 81aa' } ],
  [ { mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
      pName: 'product 1 c227' },
    { mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
      pName: 'product 2 c227' } ] ]

Dinesh Pandiyan · Accepted Answer · 2018-11-18 14:26:26Z

You need to wrap the category object into a key category

This snippet should work for you

let categories = [{
  id: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
  category: 'category c227',
}, {
  id: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
  category: 'category 81aa',
}];
let products = [{
  mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
  pName: 'product 1 c227',
}, {
  mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
  pName: 'product 2 c227',
}, {
  mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
  pName: 'product 1 81aa',
}, {
  mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
  pName: 'product 2 81aa',
}, {
  mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
  pName: 'product 3 81aa',
}];


const yourTree = categories.map(cat => {
  return {
    category: {
      id: cat.id,
      category: cat.category
    },
    products: products.filter(product => product.mId === cat.id)
  };
});

console.log(yourTree);

Alex G · Accepted Answer · 2018-11-18 14:31:00Z

1

If you want to group the products by the id, you can try this. Hope this helps.

let categories = [{
    id: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    category: 'category c227',
},{
    id: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
    category: 'category 81aa',
}
];
let products = [{
    mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
    pName: 'product 1 c227',
}, {
    mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a',
    pName: 'product 2 c227',
}, {
    mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    pName: 'product 1 81aa',
}, {
    mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    pName: 'product 2 81aa',
},{
    mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f',
    pName: 'product 3 81aa',
}];


const combine = (categories, products) =>

    categories.map((category) => {

        const result = products.filter((val) => val.mId === category.id);

        return { category, products: result };
    });

console.log(combine(categories, products));

edited Nov 18, 2018 at 14:31

answered Nov 18, 2018 at 14:25

Alex G

1,9172 gold badges12 silver badges15 bronze badges

2 Comments

Dinesh Pandiyan Over a year ago

You can filter the products directly. reduce seems like an overhead here.

Alex G Over a year ago

@DineshPandiyan yes you are correct. updated answer.

Akrion · Accepted Answer · 2018-11-18 18:13:20Z

1

This in ES6 could be solved in a concise way Array.map and Array.filter:

let categories = [{ id: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f', category: 'category c227', }, { id: 'b21a0b57-2a2b-3750-c227-8776cedf707a', category: 'category 81aa', }];
let products = [{ mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a', pName: 'product 1 c227', }, { mId: 'b21a0b57-2a2b-3750-c227-8776cedf707a', pName: 'product 2 c227', }, { mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f', pName: 'product 1 81aa', }, { mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f', pName: 'product 2 81aa', }, { mId: 'c3c70dff-bbdf-8701-81aa-5d60dad9d14f', pName: 'product 3 81aa', }];

const result = categories.map(category => 
  ({category, products: products.filter(y => y.mId == category.id) }))

console.log(result)

answered Nov 18, 2018 at 18:13

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

1 Comment

reegan29 Over a year ago

Short and simple, Thanks @Akrion

Collectives™ on Stack Overflow

Lodash Js create a tree structure with arrays and objects

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related