合并两个带有子元素的数组

Question

我有如下两个数组，在这种情况下尝试与 id 合并，menuNo 是 id，之后，它将有一个带有子元素的新数组作为输出。带有子菜单的父菜单。

数组 1：

[
  {
    "menuNo": "1001",
    "menuName": "All Forms",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1003",
    "menuName": "All Forms 2",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1006",
    "menuName": "All Forms 3",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": null,
    "iconName": null
  }
]

数组 2：

[
  {
    "menuNo": "1002",
    "menuName": "Child 1",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1001",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1012",
    "menuName": "Child 2",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1001",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1014",
    "menuName": "Child 1",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1006",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1019",
    "menuName": "Child 2",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1006",
    "childMenu": null,
    "iconName": null
  },

json 中的预期结果：

[{
  "menuNo": "1001",
  "menuName": "All Forms",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "0",
  "childMenu": "Child 1", "Child 2",
  "iconName": null
},
{
  "menuNo": "1006",
  "menuName": "All Forms 3",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "0",
  "childMenu": "Child 1", "Child 2"
  "iconName": null
}]

试过了，但它只合并了 id 上的所有数据，如下所示：

//Merge two jSon object
const mergeById = (array1, array2) =>
    array1.map(itm => ({
      ...array2.find((item) => (item.id === itm.id) && item),
      ...itm
}));

我的计划是创建带有子菜单的菜单作为列表。我该怎么做？

Answer 1

1. 您需要在child.parentMenu === parent.menuNo 的基础上将Array.filter 用于array2。
2. 接下来，过滤器child 不是空数组，也不是null。

const mergeById = (array1, array2) =>
array1.map(parent => ({
  ...parent,
  childMenu: array2.filter((child) => child && (child.parentMenu === parent.menuNo))
    .map(child => child && child.menuName)
}));

var result = mergeById(array1, array2)
  .filter(x => x.childMenu && x.childMenu.length > 0);

代码 sn-p & 结果

var array1 = [
{
  "menuNo": "1001",
  "menuName": "All Forms",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "0",
  "childMenu": null,
  "iconName": null
},
{
  "menuNo": "1003",
  "menuName": "All Forms 2",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "0",
  "childMenu": null,
  "iconName": null
},
{
  "menuNo": "1006",
  "menuName": "All Forms 3",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "0",
  "childMenu": null,
  "iconName": null
}
];

var array2 = [
{
  "menuNo": "1002",
  "menuName": "Child 1",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "1001",
  "childMenu": null,
  "iconName": null
},
{
  "menuNo": "1012",
  "menuName": "Child 2",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "1001",
  "childMenu": null,
  "iconName": null
},
{
  "menuNo": "1014",
  "menuName": "Child 1",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "1006",
  "childMenu": null,
  "iconName": null
},
{
  "menuNo": "1019",
  "menuName": "Child 2",
  "groupNo": null,
  "groupName": null,
  "menuStatus": null,
  "groupStatus": null,
  "parentMenu": "1006",
  "childMenu": null,
  "iconName": null
}
];

const mergeById = (array1, array2) =>
array1.map(parent => ({
  ...parent,
  childMenu: array2.filter((child) => child && (child.parentMenu === parent.menuNo))
    .map(child => child && child.menuName)     
}));

var result = mergeById(array1, array2)
  .filter(x => x.childMenu && x.childMenu.length > 0);

console.log(result);