Блог

Главная - Вопросы по программированию - Объединение Двух Массивов С Дочерними элементами

Объединение Двух Массивов С Дочерними элементами

#arrays #angular #typescript #angular8

Вопрос:

У меня есть два массива следующим образом, и я пытаюсь объединить их с идентификатором в этом случае, menuNo-это идентификатор, и после этого у него будет новый массив с дочерними элементами в качестве вывода. Родительское меню с дочерними меню.

Массив 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
}]

Попробовал это сделать, но он объединяет все данные только по идентификатору следующим образом:

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

Мой план состоит в том, чтобы создать меню с подменю в виде списка. Как я могу это сделать?

Ответ №1:

  1. Вам нужно использовать Array.filter на array2 основе child.parentMenu === parent.menuNo .
  2. Далее, фильтр child не является ни пустым массивом, ни null .
 const mergeById = (array1, array2) =>
array1.map(parent => ({
  ...parent,
  childMenu: array2.filter((child) => child amp;amp; (child.parentMenu === parent.menuNo))
    .map(child => child amp;amp; child.menuName)
}));

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

Фрагмент кода и результат

 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 amp;amp; (child.parentMenu === parent.menuNo))
    .map(child => child amp;amp; child.menuName)     
}));

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

console.log(result);

Комментарии:

1. В некоторых случаях ребенок может быть пустым. Я думаю, все вышесказанное должно сработать.

2. Обновлено до array2.filter((child) => child amp;amp; (child.parentMenu === parent.menuNo)) .

3. Не могли бы вы проверить ожидаемый результат в посте? Он обновлен, возможно, я был недостаточно ясен. Да, именно так.

4. Ваш JSON недействителен, childMenu так и должно быть "childMenu": ["Child 1", "Child 2"] .

5. Решено @Yong Shun — Большое спасибо.

Метки: