javascript - 映射 Javascript 数组并将其中的对象转换为特定格式？

Question

我有一个对象数组

const mainArray = [{
    name: 'main name',
    id: 'main id',
    parent: [{
      name: 'parent name',
      id: '1'
    }],
    child: [{
      name: 'child name',
      id: 'child id'
    }]
  }, {
    name: 'main name 2',
    id: 'main id 2',
    parent: [{
      name: 'parent name',
      id: '1'
    }],
    child: [{
      name: 'child name 2',
      id: 'child id 2'
    }]
  },
  {
    name: 'main name 3',
    id: 'main id 3',
    parent: [{
      name: 'parent name something else',
      id: '2'
    }],
    child: [{
      name: 'child name 3',
      id: 'child id 3'
    }]
  }
]

我需要把它带到这个表格

const resultArray = [{
  key: 'main',
  title: 'main name',
}, {
  key: 'parent',
  title: 'parent name'
}, {
  key: 'child',
  title: 'child name'
}]

到目前为止我得到了这个

if (mainArray) {
   mainArray.map((main) => {
     if (main.child && main.child.length) {
       if (main.parent && main.parent.length) {
         main.parent.map((item) => {
           data.push({
             key: 'parent',
             title: item.name
           });
         });
       }

       data.push({
         key: 'main',
         title: main.name
       });

       main.child.map((item) => {
         data.push({
           key: 'child',
           title: item.name
         });
       });
     }
   });
 }

然后我用这个数据数组来显示一个表格，它看起来像这样

我的问题是 - 两个 mains 可以不同但具有相同的 parent(parents 具有相同的 ids)然后我不不需要两次将父级添加到数组中，我需要它像这样显示

所以我正在寻找一种方法，如果两个 parents 对象具有相同的 id 将它们合并在一起，以便在最终数组中只有一个 parent 和 main 以及该父级的 child 卡在一个 parent 而不是两个相同的 parent

这里是 link到 jsfiddle

我可以使用lodash

Answer 1

您可以先按父级分组并返回一个对象，其中每个键都是父级名称，然后您可以从该对象创建一个数组。

const mainArray = [{"name":"main name","id":"main id","parent":[{"name":"parent name","id":"1"}],"child":[{"name":"child name","id":"child id"}]},{"name":"main name 2","id":"main id 2","parent":[{"name":"parent name","id":"1"}],"child":[{"name":"child name 2","id":"child id 2"}]},{"name":"main name 3","id":"main id 3","parent":[{"name":"parent name something else","id":"2"}],"child":[{"name":"child name 3","id":"child id 3"}]}]


function children(rest, child) {
  const result = [{
    key: 'main',
    title: rest.name
  }];
  result.push(...child.map(({
    name
  }) => ({
    key: 'child',
    title: name
  })))
  return result;
}

const groupByParent = mainArray.reduce((r, {
  parent,
  child,
  ...rest
}) => {
  parent.forEach(p => {
    if (!r[p.name]) {
      r[p.name] = [{
          key: 'parent',
          title: p.name
        },
        ...children(rest, child)
      ]
    } else {
      r[p.name].push(...children(rest, child));
    }
  })

  return r;
}, {})

const result = Object.values(groupByParent).flat()
console.log(result)