Remove an object in nesting array of objects

December 19, 2022

I’m having an array with nesting array and object as below. Now, with specific id, how can I remove an object and it’s children ?

lets say I want to remove an object whose id is 30. So the final out will be the array which will not have object containing id=30

let data= [{"name": "Corporate","id": 1,"editMode": true,"children": [{"name": "Banner","id": 2,"parentId": 1,"editMode": true,"children": [{"name": "Division","id": 3,"parentId": 2,"editMode": false,"children": [{"name": "Region","id": 4,"editMode": true,"children": [{"name": "District","id": 5,"editMode": true,"children": [{"name": "Store","id": 6,"editMode": false,"children": []}]}]}]},{"name": "Banner1","id": 30,"editMode": true,"children": [{"name": "Banner11","id": 35,"editMode": true,"children": []}]},{"name": "Banner1","id": 31,"editMode": true,"children": []},{"name": "Banner1","id": 32,"editMode": true,"children": [{"name": "Banner11","id": 33,"editMode": true,"children": []},{"name": "Banner11","id": 34,"editMode": true,"children": []}]}]},{"name": "Corporate1","id": 36,"editMode": true,"children": [{"name": "Corporate11","id": 38,"editMode": true,"children": []},{"name": "Corporate11","id": 39,"editMode": true,"children": []}]},{"name": "Corporate1","id": 37,"editMode": true,"children": []}]}];

In the below snipped I was able to get the nested object, But how can I delete it from the array?

let data= [{"name": "Corporate","id": 1,"editMode": true,"children": [{"name": "Banner","id": 2,"parentId": 1,"editMode": true,"children": [{"name": "Division","id": 3,"parentId": 2,"editMode": false,"children": [{"name": "Region","id": 4,"editMode": true,"children": [{"name": "District","id": 5,"editMode": true,"children": [{"name": "Store","id": 6,"editMode": false,"children": []}]}]}]},{"name": "Banner1","id": 30,"editMode": true,"children": [{"name": "Banner11","id": 35,"editMode": true,"children": []}]},{"name": "Banner1","id": 31,"editMode": true,"children": []},{"name": "Banner1","id": 32,"editMode": true,"children": [{"name": "Banner11","id": 33,"editMode": true,"children": []},{"name": "Banner11","id": 34,"editMode": true,"children": []}]}]},{"name": "Corporate1","id": 36,"editMode": true,"children": [{"name": "Corporate11","id": 38,"editMode": true,"children": []},{"name": "Corporate11","id": 39,"editMode": true,"children": []}]},{"name": "Corporate1","id": 37,"editMode": true,"children": []}]}];
console.log(findNestedObj(data, 'id', 30));

function findNestedObj(entireObj, keyToFind, valToFind) {
  let foundObj;
  JSON.stringify(entireObj, (_, nestedValue) => {
    if (nestedValue && nestedValue[keyToFind] === valToFind) {
      foundObj = nestedValue;
    }
    return nestedValue;
  });
  return foundObj;
};

>Solution :

Here is a solution where you pass a callback function — much like the native Array#filter takes a callback — which expresses what you want to keep instead of what you want to remove.

It first filters the given array with the native method, and then repeats it recursively for any children arrays, creating new objects with the newly filtered arrays that come back from such recursive calls:

function filterObjectArray(arr, filter) {
  return arr.filter(filter).map(obj => obj.children ? {
    ...obj,
    children: filterObjectArray(obj.children, filter)
  } : obj);
};

let data= [{"name": "Corporate","id": 1,"editMode": true,"children": [{"name": "Banner","id": 2,"parentId": 1,"editMode": true,"children": [{"name": "Division","id": 3,"parentId": 2,"editMode": false,"children": [{"name": "Region","id": 4,"editMode": true,"children": [{"name": "District","id": 5,"editMode": true,"children": [{"name": "Store","id": 6,"editMode": false,"children": []}]}]}]},{"name": "Banner1","id": 30,"editMode": true,"children": [{"name": "Banner11","id": 35,"editMode": true,"children": []}]},{"name": "Banner1","id": 31,"editMode": true,"children": []},{"name": "Banner1","id": 32,"editMode": true,"children": [{"name": "Banner11","id": 33,"editMode": true,"children": []},{"name": "Banner11","id": 34,"editMode": true,"children": []}]}]},{"name": "Corporate1","id": 36,"editMode": true,"children": [{"name": "Corporate11","id": 38,"editMode": true,"children": []},{"name": "Corporate11","id": 39,"editMode": true,"children": []}]},{"name": "Corporate1","id": 37,"editMode": true,"children": []}]}];

console.log(filterObjectArray(data, obj => obj?.id !== 30));