0

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
    );
  }
Mayank Madhav
  • 429
  • 1
  • 7
  • 19
  • 2
    _"However the code does not seem to go in the loop itself"_ - Fire up the [debugger](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) 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](https://stackoverflow.com/help/mcve/) – Andreas Mar 29 '18 at 10:26

1 Answers1

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.

Nicolas L
  • 305
  • 2
  • 7
  • "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) 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 Mar 29 '18 at 11:00
  • 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? – Mayank Madhav Mar 29 '18 at 13:48
  • Are you calling getTheatre() inside your callback? Could you provide a snippet of your ngOnOnit? – Nicolas L Mar 29 '18 at 13:52