CODEWITHSUNDEEP
javascriptangularjsjsonfunctionlocal-storage
user2828442
user2828442

Reputation: 2515

Call function2() inside function1() but it is getting fired before .subscribe()

I have 2 functions in my login.component.ts, I want to call function2() as soon as function1() is over, but it is getting called before .subscribe(). Why is this happening and how can I correct it?

Below is my code:

import { Component, OnInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule  } from '@angular/http';
import { Headers, Http } from '@angular/http';
import { LoginService } from './login.service';
import 'rxjs/add/operator/map';

@Component({
  providers: [LoginService],
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit {
     public user_form_value = '[email protected]';
     public password_form_value = 'lam';
     public loggeduser_array = [];

     constructor(private _loginService: LoginService) { }

     login2(){
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(
      res =>{
        console.log(res.user);
      localStorage.setItem("getLoggedInUserANG",JSON.stringify(res.user));
      this.loggeduser_array  = JSON.parse(localStorage.getItem("getLoggedInUserANG"));
     // console.log((this.loggeduser_array as any).name);
      console.log(this.loggeduser_array["name"]);    
    }
      )
   this.login_true_2();
  }


login_true_2(){
  if(localStorage.getItem("getLoggedInUserANG") != null) {
		alert("you are in");
	} else {
		alert("Wrong username or password");
	}
}

 
 ngOnInit() {
}
}

To explain more clearly, let me add numbers as what is executing in which turn

  1. I see this message in console - console.log(this.user_form_value)

  2. Then I see - console.log(this.password_form_value)

  3. Then I see the alert - alert("Wrong username or password")

  4. Then I see - console.log(res.user) and finally

  5. console.log(this.loggeduser_array["name"])

Now, if I'll press the button again to call the login2() function, this time I'll see alert - alert("you are in"), why second time, I want it to work first time.

Upvotes: 0

Views: 34

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

You need to call the login_true_2 method within the subscribe handler, otherwise it will called before the local storage is set because the login method is asynchronous.

Second time it is working because by the time second click happens, the local storage value is already set by the first call.

  login2() {
    console.log(this.user_form_value);
    console.log(this.password_form_value);
    this._loginService.login(this.user_form_value, this.password_form_value).subscribe(
      res => {
        console.log(res.user);
        localStorage.setItem("getLoggedInUserANG", JSON.stringify(res.user));
        this.loggeduser_array = JSON.parse(localStorage.getItem("getLoggedInUserANG"));
        // console.log((this.loggeduser_array as any).name);
        console.log(this.loggeduser_array["name"]);
        this.login_true_2();
      }
    )
  }

Upvotes: 1

Related Questions