按嵌套属性 ID 合并对象数组

Question

这是我的例子：

{
    id: 'productId',
    label: 'productLabel',
    items: productSizes.map( productSize => {
        return {
            id: productSize.groupId,
            label: productSize.groupId.split('-')[0],
            items: productSize.size,
        }
    }),
}

这将导致我们的数据如下所示：

{
    id: 'productId',
    label: 'productLabel'
    items: [
        {id: 'productA-11', label: 'productA', items: {width: 100, height: 100}},
        {id: 'productA-11', label: 'productA', items: {width: 150, height: 150}},
        {id: 'productA-11', label: 'productA', items: {width: 200, height: 200}},
        {id: 'productB-22', label: 'productB', items: {width: 100, height: 100}},
    ]
}

但我想得到这样的东西：

{
    id: 'productId',
    label: 'productLabel'
    items: [
        {id: 'productA-11', label: 'productA', items: [ {width: 100, height: 100}, {width: 150, height: 150}, {width: 200, height:200}],
        {id: 'productB-22', label: 'productB', items: [{width: 100, height: 100}],
    ]
}

不确定我是否用文字很好地描述了我的问题，但我想以某种方式将内部属性 items 弄平，以便合并 SAME productId 的大小成一个数组。

Answer 1

Array.reduce会帮助你

逻辑

遍历对象的 items 数组。
检查reducer的累加器是否已经有相同id和label
如果有一个节点具有相同的 id 和 label，将当前项目推送到该节点的 items 数组，否则将新节点插入累加器 id、label 和 items

工作Fiddle

const data = {
  id: 'productId',
  label: 'productLabel',
  items: [
    { id: 'productA-11', label: 'productA', items: { width: 100, height: 100 } },
    { id: 'productA-11', label: 'productA', items: { width: 150, height: 150 } },
    { id: 'productA-11', label: 'productA', items: { width: 200, height: 200 } },
    { id: 'productB-22', label: 'productB', items: { width: 100, height: 100 } },
  ]
};
const { id, label } = data;
const items = data.items.reduce((acc, curr) => {
  const node = acc.find(item => item.id === curr.id && item.label === curr.label);
  if (node) {
    node.items.push(curr.items);
  } else {
    acc.push({
      id: curr.id,
      label: curr.label,
      items: [curr.items]
    })
  }
  return acc;
}, [])
const output = {
  id,
  label,
  items,
}
console.log(output);

按嵌套属性 ID 合并对象数组

Merge array of objects by nested property ID

javascript

arrays

ecmascript-6

按嵌套 属性 ID 合并对象数组

Merge array of objects by nested property ID

javascript

arrays

ecmascript-6

按嵌套属性 ID 合并对象数组