how to remove the object that meets the condition from an array of objects?

Question

I receive in my function an object with the following information

{
  "name": "Grand modèle",
  "description": "Par 10",
  "price": 0,
  "functional_id": "grand_modele_par_10",
  "quantity": 2,
  "amount": 0
}

and I need to check on the next array of objects in which it is positioned to remove it

[
  {
    "name": "Matériel crémation",
    "products": [
      {
        "file": "data:image/;base64,",
        "name": "Sacs bordeaux",
        "description": "Pour les crémations Référence",
        "id": 12,
        "path": "",
        "items": [
          {
            "name": "Petit modèle",
            "description": "Par 25",
            "price": 0,
            "functional_id": "petit_modele_par_25",
            "quantity": 2,
            "amount": 0
          },
          {
            "name": "Grand modèle",
            "description": "Par 10",
            "price": 0,
            "functional_id": "grand_modele_par_10",
            "quantity": 2,
            "amount": 0,
            "itemAdded": false
          }
        ]
      }
    ]
  },
  {
    "name": "Documents",
    "products": [
      {
        "file": "data:image/;base64,",
        "name": "Affiches procédure",
        "description": "De prise en charge",
        "id": 18,
        "path": "",
        "items": [
          {
            "price": 0,
            "functional_id": "affiches_procedure",
            "quantity": 1,
            "amount": 0
          }
        ]
      }
    ]
  }
]

To do this I go through the array of objects with a 'forEach' to locate the item that meets the condition of being equal and remove it

public deleteItem(item) {


        this.fullCartInfo.forEach(category => {
            category.products.forEach(product => {
                product.items.forEach(itemAdded => {
                    if (item.functional_id === itemAdded.functional_id) {
                        this.fullCartInfo.splice(itemAdded);
                    }
                });
            });
        });
        this.cartService.removeItem(item);
    }

what I get is for him to empty my array of objects. How can I get him to delete only the one who meets the condition? What's my mistake? Thank you all for your time

Answer 1

Array.prototype.splice(start[, deleteCount[, item1[, item2[, ...]]]]) expects the index of the first element that should be removed (start) and optionally how many elements should be removed (deleteCount).

For the start index we can use the second argument of the Array.prototype.forEach() callback which is the index of the current element in the collection.

The following example uses:

• a reduced set of data
• a regular function instead of your class method, just because it was easier to work with. You can just copy&paste the body of the function into your deleteItem method.

const objectToRemove = { "functional_id": "grand_modele_par_10" }

const objects = {
  fullCartInfo: [
    { "products": [{ "id": 12, "items": [{ "functional_id": "grand_modele_par_10" }] }] },
    { "products": [{ "id": 18, "items": [{ "functional_id": "affiches_procedure" }] }] }
  ]
}

function deleteItem(item) {
  this.fullCartInfo.forEach((category, index) => {  // the index we will use for .splice() when we've found a matching category
    category.products.forEach(product => {
      product.items.forEach(itemAdded => {
        if (item.functional_id === itemAdded.functional_id) {
          this.fullCartInfo.splice(index, 1);  // remove one item only
        }
      });
    });
  });
}

deleteItem.apply(objects, [objectToRemove]);
// .apply() is only used to set the value of <this> in deleteItem and therefor simulate its behavior as a class method.

console.log(objects);

But this will only work when you only remove one item from the collection, or if you remove the items from the end. Otherwise the index of .fullCartInfo.forEach(...) will be out of sync with the actual collection that you've just modified with .splice(). E.g. you remove the first item at index 0, the array then will shift all elements one index to the left (item at index 1 would then be at index 0, item at index 2 would then be at index 1, ...) but the index in the callback won't be updated.

If there's a chance that you will remove multiple items then you should use .filter() or a good old for loop which iterates from the last to the first item.

.filter()

const objectToRemove = { "functional_id": "grand_modele_par_10" }

const objects = {
  fullCartInfo: [
    { "products": [{ "id": 12, "items": [{ "functional_id": "grand_modele_par_10" }] }] },
    { "products": [{ "id": 18, "items": [{ "functional_id": "affiches_procedure" }] }] }
  ]
}

function deleteItem(item) {
  this.fullCartInfo = this.fullCartInfo.filter((category, index) => {
    let keepCategory = true;
    
    category.products.forEach(product => {
      product.items.forEach(itemAdded => {
        if (item.functional_id === itemAdded.functional_id) {
          keepCategory = false;
        }
      });
    });
    
    return keepCategory;
  });
}

deleteItem.apply(objects, [objectToRemove]);
console.log(objects);

for loop in reverse

const objectToRemove = { "functional_id": "grand_modele_par_10" }

const objects = {
  fullCartInfo: [
    { "products": [{ "id": 12, "items": [{ "functional_id": "grand_modele_par_10" }] }] },
    { "products": [{ "id": 18, "items": [{ "functional_id": "affiches_procedure" }] }] }
  ]
}

function deleteItem(item) {
  for(let index = this.fullCartInfo.length - 1; index >= 0; index--) {
    this.fullCartInfo[index].products.forEach(product => {
      product.items.forEach(itemAdded => {
        if (item.functional_id === itemAdded.functional_id) {
          this.fullCartInfo.splice(index, 1);
        }
      });
    });
  }
}

deleteItem.apply(objects, [objectToRemove]);

console.log(objects);