Delete object or nested object from array

Question

I need to delete an object or nested object in an array, from a given object ID.

The object needed to be deleted can both be a root object in the array or a nested object (a variant in this example) in one of the root objects.

Here's the array structure (both root objects and variant objects has unique IDs):

[
   { id: 1, title: 'object without variants', variants: [] },
   { id: 2, title: 'object with variants', variants: [{ id: 21, title: 'variant 1' }, { id: 22, title: 'variant 2' }]
]

So for example if the object ID passed from the click event that triggers the delete function is 1, I want to delete the whole root object with the ID of 1 and if the object passed from the click event is 21, I only want to delete the variant with the ID of 21 under the root object with the ID of 2 and not the whole root object.

How can this be done?

UPDATE I got it working by using this code (passedObjectId is the ID of the object to be removed):

array = array.filter(object => object.id !== passedObjectId);

for (let object of array) {
   object.variants = object.variants.filter(variant => variant.id !== passedObjectId);
}

I also need to remove the root object from the array if the last variant is removed from the object.

The code below works, but can I make this any prettier without having to use 3 filter() methods?

array = array.filter(object => object.id !== passedObjectId);

for (let object of array) {
   // Remove the variant from the root object
   object.variants = object.variants.filter(variant => variant.id !== passedObjectId);

   // Remove the root object, if there's no variants left in it
   if (!object.variants.length) {
      array = array.filter(object => object.id !== passedObjectId);
   }
}

ANOTHER UPDATE

I ended up using this code, that also removes a root object, if the last variant is removed:

array = array.filter(object => {
   const hasRemovedVariant = object.variants.some(variant => variant.id === passedObjectId);

   if (hasRemovedVariant) {
      object.variants = object.variants.filter(variant => variant.id !== passedObjectId);

      return object.variants.length;
   }

   return object.id !== passedObjectId;
});

Answer 1

Here is an example on how you can delete them separately, I let you put that together. If you have any question or trouble in the way to do it, feel free to ask.

const original = [{
    id: 1,
    title: 'object without variants',
    variants: [],
  },
  {
    id: 2,
    title: 'object with variants',

    variants: [{
      id: 21,
      title: 'variant 1'
    }, {
      id: 22,
      title: 'variant 2'
    }],
  },
  {
    id: 3,
    title: 'object with one variant',

    variants: [{
      id: 21,
      title: 'variant 1'
    }],
  }
];

// Remove the root id
const rootIdToDelete = 1;

const modifiedRoot = original.filter(x => x.id !== rootIdToDelete);

// Remove the variant id
const variantToDelete = 21;

const modifiedRootAndVariant = modifiedRoot.filter((x) => {
  x.variants = x.variants.filter(x => x.id !== variantToDelete);
  
  // Keep only the roots that have at least 1 variant
  return x.variants.length;
});

console.log(modifiedRootAndVariant);

Answer 2

You could create recursive function with some method so that you can exit the loop on first match and you can use splice to remove the element.

const data = [{ id: 1, title: 'object without variants', variants: [] },{ id: 2, title: 'object with variants', variants: [{ id: 21, title: 'variant 1' }, { id: 22, title: 'variant 2' }]}]

function remove(data, oid) {
  data.some((e, i) => {
    if(oid == e.id) return data.splice(i, 1);
    if(e.variants)  remove(e.variants, oid)
  })
}

remove(data, 21)
console.log(data)

Answer 3

People have already answered but how about some functional, recursive and immutable code:

let array = [
  { id: 1, title: 'object without variants', variants: [] },
  { id: 2, title: 'object with variants', variants: [{ id: 21, title: 'variant 1' }, { id: 22, title: 'variant 2' }] }
];

const deleteFromArray = (arr, id) => {
  if (!arr) return

  let res = [];
  arr.forEach((obj) => {
    if (obj.id !== id) {
      res.push({ ...obj, variants: deleteFromArray(obj.variants, id) })
    }
  })

  return res;
}

console.log(JSON.stringify(deleteFromArray(array, 1)));

That way if you have some reference to the deleted object, it is deleted in ALL the objects in your array, including any nested variants.

Answer 4

You need to have a loop inside a loop. You could use forEach for example.

var arr = [
           { id: 1, title: 'object without variants', variants: [] },
           { id: 2, title: 'object with variants', variants: [{ id: 21, title: 'variant 1' }, { id: 22, title: 'variant 2' }]}
          ];
   
var idToDelete = 21;

arr.forEach(function(obj,i){

 if (obj.id == idToDelete){
    arr.splice(i,1);
    }

 obj.variants.forEach(function(variants,i){
  if (variants.id == idToDelete){
    obj.variants.splice(i,1);
  }

 })
})
console.log(arr)

Answer 5

This snippet will remove any child with an specified ID, no matter how big the hierarchy is.

var myArray = [{
    id: 1,
    title: 'object without variants',
    variants: []
  },
  {
    id: 2,
    title: 'object with variants',
    variants: [{
      id: 21,
      title: 'variant 1',
      variants: [{
        id: 23,
        title: 'variant 1'
      }, {
        id: 24,
        title: 'variant 2'
      }]
    }, {
      id: 22,
      title: 'variant 2'
    }]
  }
]

console.log(deleteByID(myArray, 21));

function deleteByID(array, id) {
  for (var i = 0; i < array.length; i++) {
    var item = array[i];

    deleteItemByID(myArray, item, id, i);
  }

  return array;
}

function deleteItemByID(array, item, id, count) {
  if (item.id == id) {
    array.splice(count, 1);
    return;
  } else {
    if (item.variants) {
      if (typeof item.variants === "object") {
        for (var i = 0; i < item.variants.length; i++) {
          var varItem = item.variants[i];
          deleteItemByID(item.variants, varItem, id, i);
        }
      }
    }
  }
}

Answer 6

You need to loop through your array and check if each object id is a match if it is the delete the object, else loop through your variants within the object and check for a match and delete the object.

Make sure you loop in reverse as you are modifying the array that you are looping through, hence the indexes change and you might get index out range exception

var myArray = getYourArray();
var idToCheck = 1; // get the id

for(int i=myArray.length;i--){
  if(myArray[i].id == idToCheck){
      myArray.splice(i);
  }
  else{
     if(myArray[i].variants.length>0){
       for(int j=myArray[i].variants.length;j--){
          if(myArray[i].variants[j].id == idToCheck){
             myArray[i].variants.splice(j);
          }
       }
     }
   }
}