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.

Answer 1

 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.

Answer 2

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