Lodash Js 用数组和对象创建树结构答案

【问题标题】：Lodash Js create a tree structure with arrays and objectsLodash Js 用数组和对象创建树结构
【发布时间】：2019-04-21 01:21:09
【问题描述】：

我正在尝试创建像数组和对象这样的 Lodash 树。我有两个具有公共键的数组（如类别和产品）。需要用字符串索引形成一个Tree结构。

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

需要这样的结构

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

我尝试并获得了相应类别的产品。但需要帮助才能遵循上述结构。

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

console.log(arrResult);

控制台结果是：

{ 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' } ] ]

【问题讨论】：

标签： javascript node.js reactjs typescript lodash

【解决方案1】：

如果你想按 id 对产品进行分组，你可以试试这个。希望这会有所帮助。

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));

【讨论】：

可以直接筛选商品。 reduce 在这里似乎是一种开销。
@DineshPandiyan 是的，你是对的。更新的答案。

【解决方案2】：

您需要将类别对象包装成一个键category

这个 sn-p 应该适合你

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);

【讨论】：

【解决方案3】：

ES6 中的这个问题可以用简洁的方式解决 Array.map 和 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)

【讨论】：

简短，感谢@Akrion