Function that runs for and goes excluding according to condition

Question

I have an array called listAtributos: any[] = []; and I need to remove the lines that match my index.

If I give a console log in this way, it shows me exactly the elements that should be deleted:

removeAtributo(index: number){
       for(let i=0;i<this.listAtributos.length;i++){
          if(this.listAtributos[i].indexvariacaoatributo == index){
            console.log(this.listAtributos[i]) 
          }
      }
}

But when I switch to the splice function, only the first element is deleted, having to double-click the button that calls this delete function.

You shouldn’t erase the two since you’re in a repeating structure?

With the splice:

removeAtributo(index:number){
       for(let i=0;i<this.listAtributos.length;i++){
          if(this.listAtributos[i].indexvariacaoatributo == index){
            this.listAtributos.splice(i,1)  
          }
     }
}

Example of input:

My object listAtributes has:

0: {indexvariacaoatributo: 0, id: 5, tipovariacao: "Cor", valorvariacao: "Azul"}
1: {indexvariacaoatributo: 0, id: 6, tipovariacao: "Cor", valorvariacao: "Amarelo"}
2: {indexvariacaoatributo: 1, id: 5, tipovariacao: "Cor", valorvariacao: "Azul"}
3: {indexvariacaoatributo: 1, id: 7, tipovariacao: "Tamanho", valorvariacao: "P"}

I need to remove the lines where the indexvariacaoatributo equals the index passed in the removeAtributo function()

If my index is passed in parameter 1, it should be removed:

2: {indexvariacaoatributo: 1, id: 5, tipovariacao: "Cor", valorvariacao: "Azul"}
3: {indexvariacaoatributo: 1, id: 7, tipovariacao: "Tamanho", valorvariacao: "P"}

Answer 1

What happens is the following. In the example given your array has 4 items.

When starting the is, it will try to go through the 4 items. However, after it removes the first element that enters its criterion (index 2), the last element of (index 3) becomes index 2, as it takes the place of the removed element and its array decreases in size (from 4 elements to 3).

With this, your variable i goes to 3 and the size of your array also and the loop ends (due to condition i < this.listAtributos.length).

The ideal would be a solution of the type:

removeAtributo(index:number){
   for(let i=0;i<this.listAtributos.length;i++){
      if(this.listAtributos[i].indexvariacaoatributo == index){
        this.listAtributos.splice(i,1);
        i--; //evita que ele ignore o próximo elemento
      }
   }
}

Answer 2

How you are doing a FOR, changing a global attribute, when you search for an item by index and use the splice to remove it, the next item of what you just deleted ends up getting in place of the newly removed item, example:

1: { item 1 }
2: { item 2 }
3: { item 3 }

When removing item 2, which you have index 2, item 3 that had index 3 will take the place of item 2, then, will have the index 2.

1: { item 1 }
2: { item 3 }

Since you are using typescript in Angular, a much simpler solution would be to use the method filter:

removeAtributo(index : number){
    this.listAtributos = this.listAtributos.filter(
     (atributos) => atributos.indexvariacaoatributo != index )
}

Read more in the Documentation Array.prototype.filter()