What is the best way to eliminate an object from an array of objects that fulfills a specific condition?

Question

What is the best way to eliminate an object from an array of objects that fulfills a specific condition?

Upon receiving an object in my function containing the information below:

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

I must scan the next array of objects to locate and 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
          }
        ]
      }
    ]
  }
]

I use a 'forEach' loop to find the item that matches the condition and remove it from the array of objects.

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

However, instead of deleting only the matching item, the entire array gets emptied. What am I doing wrong here? Your help is much appreciated.

javascript arrays angular7 splice arrayobject

Answer 1

Answer №1

Array.prototype.splice(start[, deleteCount[, item1[, item2[, ...]]]])

function requires the index of the first element to be removed (start) and optionally specifies how many elements to remove (deleteCount).

Using the second argument of the Array.prototype.forEach() callback provides the start index, which is the index of the current element in the collection.

An example implementation involves:

a reduced dataset
a standard function instead of a class method, for easier manipulation. You can simply copy and paste the function body 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) => {  
    category.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);

However, this method only works when removing one item from the collection or removing items from the end. If you intend to remove multiple items, consider using .filter() or a reverse for loop.

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

Answer 2

Array.prototype.splice(start[, deleteCount[, item1[, item2[, ...]]]])

function requires the index of the first element to be removed (start) and optionally specifies how many elements to remove (deleteCount).

Using the second argument of the Array.prototype.forEach() callback provides the start index, which is the index of the current element in the collection.

An example implementation involves:

a reduced dataset
a standard function instead of a class method, for easier manipulation. You can simply copy and paste the function body 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) => {  
    category.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);

However, this method only works when removing one item from the collection or removing items from the end. If you intend to remove multiple items, consider using .filter() or a reverse for loop.

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

What is the best way to eliminate an object from an array of objects that fulfills a specific condition?

Answer №1

Similar questions

Error: The function m.easing[this.easing] is not defined

Exploring Multidimensional Arrays

Uploading a file from a React contact form using Axios may result in S3 generating empty files

Issue with ng-selected when used alongside ng-options or ng-repeat in Angular

Tips for extracting information from a website with Selenium using Python

PHP: Receiving notification if $_GET variable is void

What is preventing the click event on this dynamically generated checkbox using jQuery?

Toggle the visibility of table rows using checkboxes

"Customize the number of items displayed per page with Bootstrap Vue's perPage

Discovering identical objects in two arrays in Angular using TypeScript is a breeze

Double trouble: Knockout validation errors displayed twice

What is the best way to save information from an ng-repeat loop into a variable before sending it to an API?

Modification of window size using jQuery animations

Responsive screen sizing in Vue.js

The button's status changes to disabled until I click outside the input field in Angular

Comparison Between Angular and Web API in Regards to Racing Condition with Databases

Shade within the autocomplete

Unable to save cookies on mobile browsers, but functioning properly on desktop computers

The Vue CLI build is displaying a blank page when hosted on an Apache server

What is the best way to link this information to access the data attribute?