Merge two arrays with child elements

Question

I've two arrays as follows and trying to merge with id in this case, menuNo is the id and after that, it'll have a new array with child elements as output. Parent menu with child menus.

Array 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
  }
]

Array 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
  },
]

Expected Result in 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
}]

Tried this but it only merges all data on id as follows:

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

My plan is to create a menu with a submenu as a list. How can I do that?

Answer 1

1. You need use Array.filter for array2 based on child.parentMenu === parent.menuNo.
2. Next, filter child is not empty array nor 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);

Code snippet & Result

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