Undefined response in first api call in ionic3

Question

I am trying to implement nested api calls in ionic3

submitLoginForm() {
    var username = this.formData.value.username;
    var password = this.formData.value.password;
    var bodyjson;
    var userId;

    this.ApidataService.logincheck(username,password).subscribe(data => {
        this.logindetail = data;
        bodyjson = JSON.parse(this.logindetail._body);
        userId =  bodyjson.user.id;
        if( userId != undefined){
            this.ApidataService.userdata(userId).subscribe(data => {
                this.userInfo = data;
            });
        }
        console.log(userId);
    });
    console.log(this.userInfo);
}

Now when I call this function the nested api returns undefined for the first call and then from the second call onwards it returns proper values however when I try to log the argument that is being sent to the api I notice that the correct value is passed each time. I believe that this is due to some synchronization issues but am unable to figure out the issue and the solution for the same.

Answer 1

You can use flatMap here.It seems you don't need to retrieve results of both requests hence this should work for you.

 import { Observable } from "rxjs/Observable";
 import 'rxjs/add/observable/flatMap';

Then:

 this.ApidataService.logincheck(username,password).flatMap(
  (data) => {
        this.logindetail = data;
        bodyjson = JSON.parse(this.logindetail._body);
        userId =  bodyjson.user.id;
        if( userId != undefined){
          return this.ApidataService.userdata(userId);
        }else{
          return Observable.empty();
        }
    }).map((res: Response) => res ? res.json() : {})
    .subscribe(data => {
           this.userInfo = data ? data : {};
    });

You can read more about flatMap here