infinite loop with array.push() in Angular

Question

I have a small problem and I don't understand why...

The situation : I have a array of all the reservation for the day. I would like, if I click on a button "evening", have only the reservation for the evening.

The getEvening() function is called in parent component when I click on a button.

In my child component.html, I have :

<tbody *ngFor="let resa of resas">
        <tr class="addred" (click)='setResa(resa)'>
            <td *ngIf="!size">{{ resa.confirmResa }}</td>
            <td>{{ resa.arrivee.split(' ')[1] }}</td>
            <td>{{ resa.nom_client }}</td>
            <td *ngIf="!size">{{ resa.nbre_client }}</td>
            <td *ngIf="!size">{{ resa.num_phone_client }}</td>
            <td *ngIf="!size">{{ resa.num_table }}</td>
            <td *ngIf="!size">{{ resa.formule }}</td>
            <td *ngIf="!size" (click)="stopEvent($event)" (mouseover)=setResaId(resa)>

                <input class="venu" type="checkbox" clrToggle (change)="came($event)" [checked]="resa.venu === 1" />
            </td>
        </tr>
    </tbody>

In my child component.ts, I have :

export class ReservationTabComponent implements OnInit {


  @Input() date: Subject<string>;

  @Output() resa = new EventEmitter<any>();

  addred: boolean;
  resas: any[] = [];
  resaId: string;

  dateDay: string;
  hour: number;

  scrHeight: number;
  scrWidth: number;

  size: boolean;
  bool: boolean;

  venu: number;

  constructor(
    private datastore: DatastoreService,
    private resaService: ReservationService
  ) { }

  ngOnInit(): void {
    this.getScreenSize();
    this.date.subscribe((date) => {
      this.dateDay = date;
      this.setDate(this.dateDay);
    });
    this.addred = false;
  }

  setDate(date: string) {
    this.datastore.findResaOfTheDay(date)
      .subscribe(
        (resas) => {
          this.resas = resas.data.original;
          console.log(this.resas);
        });
  }



  getAll() {

    this.setDate(this.dateDay);
  }

  getMidi() {
    this.resas = [];
  }

  getEvening() {
    for (let resa of this.resas) {

      this.hour = parseInt(moment().format(resa.arrivee.split(' ')[1]), 10);
      if (this.hour > 13) {
        this.resas.push(resa);  <-- this causing infinite loop...
        console.log(resa);  <-- this works correctly
      }
    }
  }
}

Actually, when I click on the button, I have a infinte loop with push() method but not with console.log() method...

I don't understand why...

Balastrong · Accepted Answer · 2020-05-31 09:44:56Z

1

You're pushing more elements to the very same list you're iterating, hence every time you push an element, you'll iterate over it, and push it again and repeat forever.

Let's say you match for B:

 v 
[A,B,C]

   v 
[A,B,C] push B

     v 
[A,B,C,B]

       v 
[A,B,C,B] push B

         v 
[A,B,C,B,B] push B

           v 
[A,B,C,B,B,B] push B

You may want to use two different arrays :)

answered May 31, 2020 at 9:44

Balastrong

4,4602 gold badges14 silver badges32 bronze badges

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

1 Comment

Jo Le Belge Over a year ago

Ah yes ! ! Of course ! I iterate the same array each time so he'll never stop !! Thank you and sorry... I knew it was a simply error... Thanks a lot ! ;)

Collectives™ on Stack Overflow

infinite loop with array.push() in Angular

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