Remove an object in nesting array of objects

Question

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;
};

Get familiar with [how to access and process objects and arrays](/q/11922383/4642212), and use the static and instance methods of [`Object`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object#Static_methods) and [`Array`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods). Then, [edit] your question and provide a [mre] along with your _desired_ results, your _actual_ results, and demonstrate _your research and your attempts_ and explain what precisely didn’t work. Where in the process of writing your code are you stuck? — Sebastian Simon, Dec 19 '22 at 17:09
@SebastianSimon edited it with my try, but i'm not able to delete that object — vamsi sai, Dec 19 '22 at 17:20
Strange, in your desired output there is still the object with id 30. Also your code seems to be some attempt to *find* an object, not to *remove* it. Are you looking to find it? — trincot, Dec 19 '22 at 17:20
@trincot I tried to remove that object, but was not able to do that. Tried reverse engineering so I made a try to find that object in the nesting array of objects. now I want to delete that from my original array — vamsi sai, Dec 19 '22 at 17:23
If you tried to remove that object, and not able to, then it would be appropriate that you would include the code of *that* attempt. In your current code there is no trace of an attempt to remove it. — trincot, Dec 19 '22 at 17:36

score 0 · Accepted Answer · answered Dec 19 '22 at 17:31

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

Remove an object in nesting array of objects

1 Answers1