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