Remove object from array in another array

Question

I have the following data structure

menu: [   { id: 1, title: 'Test 1', children: [] },
          { id: 2, title: 'Test 2', children: [
              { id: 5, title: 'Test 5', children: [] },
              { id: 6, title: 'Test 6', children: [] },
              { id: 7, title: 'Test 7', children: [] },
              { id: 8, title: 'Test 8', children: [] },
            ] },
          { id: 3, title: 'Test 3', children: [
              { id: 9, title: 'Test 9', children: [] },
              { id: 10, title: 'Test 10', children: [] },
              { id: 11, title: 'Test 11', children: [] },
              { id: 12, title: 'Test 12', children: [] },
            ]  },
          { id: 4, title: 'Test 4', children: [] },
        ]

How can remove object with Title 'Test 5'? Or from sub array in children arr?

onDeleteClick(item) {
    const menuCopy = JSON.parse(JSON.stringify(this.menu));
    const index = menuCopy.indexOf(item);
    if (index !== -1) {
      menuCopy.splice(index, 1);
    } else {
      menuCopy.map((el) => {
        if (el.children.length) {
          el.children.map((child) => {
            if (child.Id === item.Id) {
              console.log(child);
            }
          });
        }
      });
    }
    this.setMenu(menuCopy);
  }

I am stuck at this point. I think that here should be used recursion but i have no idea how to implement this.

Nicolae Maties · Accepted Answer · 2019-12-13 14:09:22Z

const menu = [ { id: 1, title: 'Test 1', children: [] },
    { id: 2, title: 'Test 2', children: [
        { id: 5, title: 'Test 5', children: [] },
        { id: 6, title: 'Test 6', children: [
            { id: 5, title: 'Test 5', children: [] },
            { id: 7, title: 'Test 7', children: [] },
            { id: 8, title: 'Test 8', children: [] }
         ] },
        { id: 7, title: 'Test 7', children: [] },
        { id: 8, title: 'Test 8', children: [] },
      ] },
    { id: 3, title: 'Test 3', children: [
        { id: 9, title: 'Test 9', children: [] },
        { id: 10, title: 'Test 10', children: [] },
        { id: 11, title: 'Test 11', children: [] },
        { id: 12, title: 'Test 12', children: [] },
      ]  },
    { id: 4, title: 'Test 4', children: [] },
  ];

const excludeChildrenFromTitle = (arr, excludedChildTitle) => {
  return arr.map((item) => {
      const children = excludeChildrenFromTitle(item.children.filter((child) => child.title !== excludedChildTitle), excludedChildTitle);
     return {
       ...item,
       children
     }
  });
};

console.log(excludeChildrenFromTitle(menu, 'Test 5'))

Using a simple map for the whole menu array and then filtering every children array from each menu item can do the job.

I have updated the answer to remove the excluded child from sub array too.

Aksen P · Accepted Answer · 2019-12-13 14:15:21Z

You can filter first each first-level element and then second-level with map:

var l = [{ id: 1, title: 'Test 1', children: [] }, { id: 2, title: 'Test 2', children: [ { id: 5, title: 'Test 5', children: [] }, { id: 6, title: 'Test 6', children: [] }, { id: 7, title: 'Test 7', children: [] }, { id: 8, title: 'Test 8', children: [] }, ] }, { id: 3, title: 'Test 3', children: [ { id: 9, title: 'Test 9', children: [] }, { id: 10, title: 'Test 10', children: [] }, { id: 11, title: 'Test 11', children: [] }, { id: 12, title: 'Test 12', children: [] }, ]  }, { id: 4, title: 'Test 4', children: [] }, 
{ id: 5, title: 'Test 5', children: [] }, ];
 
const removeTitleByValue = (arr, titleValue) => {
  return arr
      .filter(e => e.title !== titleValue)
      .map((e2) => { 
      const children = e2.children.filter((ch) => ch.title !== titleValue);
     return { ...e2, children }
  });
};

console.log(removeTitleByValue(l, 'Test 5'))

Collectives™ on Stack Overflow

Remove object from array in another array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related