Why are my method calls being executed in reverse order?

[Nathan Milota]

I have 2 methods, but the handleLogin() method is being executed first even though I put it at the bottom.   On the console.log, it prints the last line first.    

storeUserDetails(){        this.schoolService.getSchoolByUserName(this.username)    .subscribe(data=> {const school= data as SchoolRecord;      LoginComponent.schoolNum=school.id;      console.log(school.schoolName);       this.school.userName= school.userName      this.school.password= school.password      console.log(this.school.userName)      console.log(this.username)})      this.handleLogin()  }  handleLogin(){     if(this.username=== this.school.userName && this.password=== this.school.password){            this.router.navigate(['welcome', this.username])      this.invalidLogin= false    }    else{      this.invalidLogin= true      console.log(this.school.userName)    }

[Nathan Milota]

I was actually able to solve it by adding the setTimeout call.  

setTimeout(()=>{       this.handleLogin()     },1000)

[Ron McLeod]

This is what your code looks like with proper formatting:storeUserDetails(){    this.schoolService.getSchoolByUserName(this.username)        .subscribe(data => {            const school = data as SchoolRecord;            LoginComponent.schoolNum = school.id;            console.log(school.schoolName);            this.school.userName = school.userName            this.school.password = school.password            console.log(this.school.userName)            console.log(this.username)        })    this.handleLogin() }
The handler code will not be executed until the Observable publishes by calling your next callback function.  It is very likely that the handleLogin function will be executed before that happens.

Did you mean to put the call to handleLogin inside the callback function?

Edit: fixed some grammar

[Ron McLeod]

Nathan Milota wrote:I was actually able to solve it by adding the setTimeout call.  
setTimeout(()=>{       this.handleLogin()     },1000)

You worked-around the problem, and only if the server providing the data returns within 1000ms.

[Nathan Milota]

Ron McLeod wrote:This is what your code looks like with proper formatting:storeUserDetails(){    this.schoolService.getSchoolByUserName(this.username)        .subscribe(data => {            const school = data as SchoolRecord;            LoginComponent.schoolNum = school.id;            console.log(school.schoolName);            this.school.userName = school.userName            this.school.password = school.password            console.log(this.school.userName)            console.log(this.username)        })    this.handleLogin() }
The handler code will not be executed until the Observable publishes by calling your next callback function.  It is very likely that before the handleLogin will be executed before that happens.

Did you mean to put the call to handleLogin inside the callback function?

Can you tell me what you mean by callback function?     I was able to solve it with the setTimeout function at 1000 ms.    For some reason, the code was being executed before everything inside the subscribe was finished until I added the timeout.

[Ron McLeod]

When you subscribe to an Observable, you provide up to three callback functions:
   next: called when there is new data
   error: called when an error has occurred
   complete: called when there is no more data

The next callback is required; the other two are optional.

Your next callback function is:=> {    const school = data as SchoolRecord;    LoginComponent.schoolNum = school.id;    console.log(school.schoolName);    this.school.userName = school.userName    this.school.password = school.password    console.log(this.school.userName)    console.log(this.username) }

[Ron McLeod]

You probably want to call the handleLogin function from within your next callback function:storeUserDetails(){    this.schoolService.getSchoolByUserName(this.username)        .subscribe(data => {            const school = data as SchoolRecord;            LoginComponent.schoolNum = school.id;            console.log(school.schoolName);            this.school.userName = school.userName;            this.school.password = school.password;            console.log(this.school.userName);            console.log(this.username);            this.handleLogin(); // <<<        }); }

[Nathan Milota]

Ron McLeod wrote:You probably want to call the handleLogin function from within your next callback function:storeUserDetails(){    this.schoolService.getSchoolByUserName(this.username)        .subscribe(data => {            const school = data as SchoolRecord;            LoginComponent.schoolNum = school.id;            console.log(school.schoolName);            this.school.userName = school.userName;            this.school.password = school.password;            console.log(this.school.userName);            console.log(this.username);            this.handleLogin(); // <<<        }); }

That works just fine.  Thank You.

[Ron McLeod]

Explanation here: Using observables to pass values

[Ron McLeod]

Nathan Milota wrote:That works just fine.  Thank You.

You're welcome

Try to spend some time to understand why you initially had a problem, why the work-around with the timer seemed to solve the problem, and why this last change worked in this case.

[Frits Walraven]

Congratulations Nathan Milota,

Your question has made it to our Journal  

Have a Cow!