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

我有一个对象数组

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

然后我用这个

数据数组
来显示一个表，它看起来像这样


我的问题是-两个
main
可以不同，但具有相同的
parent
（parents具有相同的
id
），然后我不需要将parent添加到数组中两次，我需要它像这样显示


因此，我正在寻找一种方法，以确定两个
父对象是否具有相同的
id
，从而将它们合并在一起，以便在最终数组中只有一个
父对象
，并且该父对象的
主对象
和
子对象
被固定在一个
父对象上，而不是两个相同的子对象上

这里是jsfiddle

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


const mainArray=[{“name”：“main name”，“id”：“main id”，“parent”：[{“name”：“parent name”，“id”：“1”}]，“child”：[{“name”：“child name”：“child id”}]，{“name”：“main name 2”，“id”：“main id 2”，“parent”：[{“name”：“parent name”，“id”：“1”}]，“child”：[{“name”：“child id”：“child id 2”}]，}]，{“name”：“main name”：“main id”：“main id”；“main id”；“main id”；“main id”；“main id”；“main id”；“main id”；“main id”；“mai“父项名称其他名称”、“id:“2”}]、“子项”：[{“名称”：“子项名称3”、“id:“子项id 3”}]]
功能儿童（休息、儿童）{
常数结果=[{
键：'主'，
标题：rest.name
}];
结果.推送（…child.map）(({
名称
}) => ({
关键词：“儿童”，
标题：姓名
})))
返回结果；
}
const groupByParent=mainArray.reduce（（r{
父母亲
小孩
休息
}) => {
parent.forEach（p=>{
如果（！r[p.name]）{
r[p.name]=[{
键：'父'，
标题：p.name
},
…儿童（休息，儿童）
]
}否则{
r[p.name].push（…子对象（rest，child））；
}
})
返回r；
}, {})
const result=Object.values（groupByParent.flat（））
console.log（结果）
请根据给定的数据添加结果。这不是映射操作。您不会从内部函数返回任何内容，也会忽略结果。因此，我认为使用映射函数没有意义。请使用forEach。它更适合您的其他代码。这非常有帮助，谢谢。请您解释一下为什么我们需要它当我们将
child
推送到
result
result.push（…child.map（{…
）时，推送到用户排列，因为map返回一个数组，而您希望推送每个对象而不是数组。