Removing an object from an array when a certain key value already exists in TypeScript

Question

Removing an object from an array when a certain key value already exists in TypeScript

I'm currently facing an issue with my function that adds objects to an array. The problem arises when a key value already exists in the array - it still gets added again, but I want it to only add if it doesn't exist yet. Here's what I have:

 onCheckRecipe(e) {
    if (e.detail.checked === true) {
      let tickedRecipe = e.detail.value;
      let foundRecipeIngredients = [];
      let foundRecipe;
      this.loadedRecipes.filter(function (el) {
        if (el._id === tickedRecipe) {
          el.ingredients.map((elm) => {
            foundRecipe = elm;
            foundRecipeIngredients.push(foundRecipe);
          });
        }
      });
      this.groceryListUpdated = foundRecipeIngredients;
      this.groceryListDefault = this.groceryListDefault.concat(
        this.groceryListUpdated
      );
    }
  }

In the console, I see something like this:

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "", quantity: ""}
1: {_id: "5f64ac1eb227fea1f63a5ca3", name: "avocado", quantity: "50g"}
2: {_id: "5f64ac1eb227fea1f63a5ca4", name: "lemon juice", quantity: "5g"}
3: {_id: "5f64ac1eb227fea1f63a5ca5", name: "small mozzarella pearls", quantity: "70g"}
4: {_id: "5f64ac1eb227fea1f63a5c9e", name: "almond flour", quantity: "10g"}
5: {_id: "5f64ac1eb227fea1f63a5c9f", name: "egg", quantity: "10g"}
6: {_id: "5f64ac1eb227fea1f63a5ca0", name: "unsalted butter", quantity: "30g"}
7: {_id: "5f64ac1eb227fea1f63a5ca1", name: "peanut butter", quantity: "50g"}
8: {_id: "5f64ac1eb227fea1f63a5c99", name: "chia seeds", quantity: "10g"}
9: {_id: "5f64ac1eb227fea1f63a5c9a", name: "cherries", quantity: "15g"}
10: {_id: "5f64ac1eb227fea1f63a5c9b", name: "honey", quantity: "30g"}
11: {_id: "5f64ac1eb227fea1f63a5c9c", name: "almond flour", quantity: "10g"}
length: 12
__proto__: Array(0)

My goal is to avoid adding something like "almond flour" twice if it already exists in the array, and only update the quantity. I've tried various methods without success. Any insights or ideas would be greatly appreciated. Thank you.

javascript arrays angular typescript object

Answer 1

Answer №1

To start, make sure to validate if the item exists in the list by using the findIndex method. If it does, proceed with a map operation and only update the quantity for that specific index.

If the item is not found, simply add it to the list using the concat function.

Here is an example code snippet provided below. You may need to customize it based on your requirements, but the core logic remains the same.

const items = [{
  _id: "1",
  name: "avocado",
  quantity: 50
}, {
  _id: "2",
  name: "pasta",
  quantity: 60
}]

function addItems(newItem) {
  const index = items.findIndex((curItem) => curItem.name === newItem.name);
  if (index >= 0) {
    return items.map((curItem, curIndex) => {
      return index === curIndex ? {
          ...curItem,
          quantity: curItem.quantity + newItem.quantity
        } :
        curItem;
    });
  } else {
    return items.concat(newItem);
  }
}

console.log('Current items', items);

console.log('Adding a known item', addItems({
  _id: "1232",
  name: "avocado",
  quantity: 50
}));

console.log('Adding a new item', addItems({
  _id: "23232332",
  name: "meat",
  quantity: 50
}));

Answer 2

To start, make sure to validate if the item exists in the list by using the findIndex method. If it does, proceed with a map operation and only update the quantity for that specific index.

If the item is not found, simply add it to the list using the concat function.

Here is an example code snippet provided below. You may need to customize it based on your requirements, but the core logic remains the same.

const items = [{
  _id: "1",
  name: "avocado",
  quantity: 50
}, {
  _id: "2",
  name: "pasta",
  quantity: 60
}]

function addItems(newItem) {
  const index = items.findIndex((curItem) => curItem.name === newItem.name);
  if (index >= 0) {
    return items.map((curItem, curIndex) => {
      return index === curIndex ? {
          ...curItem,
          quantity: curItem.quantity + newItem.quantity
        } :
        curItem;
    });
  } else {
    return items.concat(newItem);
  }
}

console.log('Current items', items);

console.log('Adding a known item', addItems({
  _id: "1232",
  name: "avocado",
  quantity: 50
}));

console.log('Adding a new item', addItems({
  _id: "23232332",
  name: "meat",
  quantity: 50
}));

Answer 3

Answer №2

I found exactly what I was looking for

checkRecipe(event) {
    if (event.details.checked === true) {
      for (let rec of this.recipesList) {
        if (rec.title === event.details.value) {
          rec.ingredients.forEach((ingred) => {
            let matchedIngredient = this.shoppingList.find(function (foundIngred) {
              return foundIngred.title === ingred.title;
            });
            if (matchedIngredient) {
                matchedIngredient.amount = matchedIngredient.amount + ingred.amount;
            } else {
              this.shoppingList.push(ingred);
            }
          });
        }
      }

Answer 4

I found exactly what I was looking for

checkRecipe(event) {
    if (event.details.checked === true) {
      for (let rec of this.recipesList) {
        if (rec.title === event.details.value) {
          rec.ingredients.forEach((ingred) => {
            let matchedIngredient = this.shoppingList.find(function (foundIngred) {
              return foundIngred.title === ingred.title;
            });
            if (matchedIngredient) {
                matchedIngredient.amount = matchedIngredient.amount + ingred.amount;
            } else {
              this.shoppingList.push(ingred);
            }
          });
        }
      }

Removing an object from an array when a certain key value already exists in TypeScript

Answer №1

Answer №2

Similar questions

Update the variable using Ajax after the content has loaded

Edge is experiencing a slowdown when utilizing ng-bind-html

Incorporate the feedback received from the user in the previous trial as a prompt for the next

Event handler for "copy" on the iPad

Ways to minimize an array of objects by shared key values?

The functionality of changing the source to the "docs" folder is not supported

How come TypeScript does not generate an error when attempting to import a default export that does not exist?

Learn how to eliminate all text characters from a string using jQuery, leaving only the numerical values behind

Specialized Node.js extension for automatic dependency installation

EJS: Dynamically linking CSS and JS files according to specific page conditions

iOS app launch does not trigger Phonegap handleOpenURL

Comparing arrays in IOS with varying values and lengths: a step-by-step guide

Storing Angular 4 Http Post response data in an object

I'm encountering a type error every time I attempt to render an EJS page. Could someone please take a look and help me troubleshoot?

What is the best way to display just one record that has the lowest score out of all the records?

Exchange the memory addresses of two arrays within a function

Does npm run use a separate version of TSC?

Each element is being adorned with the Ajax success function class

Automated configuration of AWS Amplify JavaScript using Gitpod

How to eliminate arrows in ngx-bootstrap datepicker?