typescript for loop does not execute

Question

I am new to Angular and Typescript. I am trying to set boolean variable to true if an object is found in an array of objects based on id. The method shown below is called from ngOnInit().

getTheatre(){
    this.mChandigarh=false;
    this.mBangaluru=false;
    this.mChennai=false;
    this.flag="Came to method call";

    for(let i=0; i<this.mChandigarhArr.length; i++){
      this.flag1="Came to chandigarh index"+i;
      if(this.mChandigarhArr[i].movieid===this.movie.id){
        this.flag2="ids matched";
        this.mChandigarh=true;
        break;
      }
    }
}

The array mChandigarhArr has the element which matches the given condition , hence the mChandigarh variable should be set to true.

However the code does not seem to go in the loop itself. The flag gets shown in UI, but flag1 and flag2 are not at all shown.

Earlier i had tried using mChandigarhArr.findIndex() as well. It did not work out for me.

<<=== Adding ngOnInit() code=====>

ngOnInit() {
    this.getChandigarhTheatre();

    console.log(this.mChandigarhArr);  //Shows the array is empty here

    this.getTheatre(); // If i call this method from a click event in template then it works
  }


  getChandigarhTheatre(){
    this.movieService.getChandigarhMovies().subscribe(
      theatres => this.mChandigarhArr=theatres,
      err =>  this.errMsg = <any>err
    );
  }

"However the code does not seem to go in the loop itself" - Fire up the debugger and step through your code to verify this assumption. Check the actual content of this.mChandigarhArr and add your findings to your question. And/or add a minimal, complete, and verifiable example — Andreas
– Andreas, Commented Mar 29, 2018 at 10:26

Nicolas L · Accepted Answer · 2018-03-29 18:24:24Z

2

I suspect your mChandigarhArr to be empty. That would explain why you never enter the loop.

Try to console.log(this.mChandigarhArr) outside your loop to be sure.

EDIT :
Your getChandigarhTheatre() function is asynchronous, which means : you don't know when your data will be available.

In your code, you call this.getTheatre() but your getChandigarhTheatre() hasn't fully completed, and theatres => this.mChandigarhArr = theatres hasn't even be executed. That's why your array is empty.

You have to move your call to getTheatre() when you're sure your callback has been completed.
Fortunately, the subscribe() operator takes a third parameter, onCompleted where you could call getTheatre() :

getChandigarhTheatre(){
  this.movieService.getChandigarhMovies().subscribe(
    theatres => this.mChandigarhArr=theatres,
    err =>  this.errMsg = <any>err,
    () => this.getTheatre()
  );
}

Also, off topic but I would suggest to use spaces as much as you can to make your code more readable.
In Typescript you can also make use of let ... of ... statement instead of the oldschool for (i ; i++) : read this.

edited Mar 29, 2018 at 18:24

answered Mar 29, 2018 at 10:39

Nicolas L

3152 silver badges7 bronze badges

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

3 Comments

Mayank Madhav Over a year ago

"I suspect your mChandigarhArr to be empty. " yes possibly that would be the reason. I am still debugging. Actually this array gets its value from a service (returns Observable<Theatre[]>) which gets called from ngOnInit(). Also when i display this array in template with *ngFor , i can see the elements as expected. I have used subscribe on Observable to assign the array returned from service to mChandigarhArr. I am still trying thanks for your response

Mayank Madhav Over a year ago

actually if i place the 'getTheatre()' outside ngOnInit() it works. I registered the method with a click event from template. The arrays seems to have no elements when method getTheatre is called from ngOnInit() [ even though it shows all elements in template]. any explanation on this?

Nicolas L Over a year ago

Are you calling getTheatre() inside your callback? Could you provide a snippet of your ngOnOnit?

Collectives™ on Stack Overflow

typescript for loop does not execute

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related