Looping Through JavaScript Array of Objects and Removing Values

Question

I'm working with Vue and Rails. The goal of the code below is remove text from input fields when users toggle between adding a new recipe and going back to the main page. This works with all my fields except for ingredients.

Ingredients is an array that belongs to the recipe object and holds a name in a key value pair. I want to loop through this and remove all the ingredients. I do that by calling the removeIngredients function. The problem is when I execute the code below, the loop only grabs every other index and thus only half of the ingredients are deleted.

resetNewRecipe: function(){
    this.recipe.name = '';
    this.recipe.chef = '';
    this.recipe.cooktime = '';
    this.recipe.amount = '',
    this.recipe.description = '';
    this.recipe.favorite = false;
    this.recipe.ingredients.name = '';
    for (i = 0; i < this.recipe.ingredients.length; i++){

      for (var name in this.recipe.ingredients[i]){

        if (this.recipe.ingredients[i].hasOwnProperty(name)){
          console.log("name = " + name);
          console.log("i = " + i);
          console.log("this.recipe.ingredients[i][name] " + this.recipe.ingredients[i][name]);

          this.removeIngredient(i);
        }
      }
    }
  },

The recipe object code

recipe: {
    name: '',
    chef: '',
    cooktime: '',
    amount: '',
    description: '',
    favorite: false,
    ingredients: [
      {name: ''},
    ]}

Console.log returns when I create four ingredients each named 1,2,3,4. Basically 1 and 3 get passed successfully and are deleted, while 2 and 4 remain when I return back to the form.

name = name
i = 0
this.recipe.ingredients[i][name] 1

name = name
i = 1
this.recipe.ingredients[i][name] 3

why not just this.recipes.ingredients = [] instead of looping through each since you just want to reset the object? — Amresh Venugopal
– Amresh Venugopal, Commented Feb 25, 2017 at 23:39

trincot · Accepted Answer · 2017-02-25 23:32:42Z

1

Iterate backwards through the array, so from the last index to 0. That way you will get to delete them all. Also, you should break out of the inner loop when you actually delete one:

for (var i = this.recipe.ingredients.length - 1; i >= 0; i--){ // <-- change direction
  for (var name in this.recipe.ingredients[i]){
    if (this.recipe.ingredients[i].hasOwnProperty(name)){
      this.removeIngredient(i);
      break; // <------ add this
    }
  }
}

answered Feb 25, 2017 at 23:32

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahler7 Over a year ago

That did it. Thank you so much for your help.

Collectives™ on Stack Overflow

Looping Through JavaScript Array of Objects and Removing Values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related