Chained http get calls, Angular 2, typescript

Question

In an Angular 2 form, I need to retrieve the firstname and lastname from a http get call, providing a user_id, which is retrieved by a previous http get call to another endpoint.

I know there are similar issues with async http get calls, but none of these truly helped me.

So, the first call receives user_id field, without providing anything to the server:

/API/system/session/unusedid

It returns this -->

{user_name":"rgar003","session_id":"0635400936","is_technical_user":"false","user_id":"403"

Having this user_id (403), I can call this other endpoint and retrieve its userName and lastName:

/API/identity/user/403    //403 or whatever the user_id is

It returns this -->

{"job_title":"dsf","userName":"rgar003","lastname":"Garcia","firstname":"Robert"}

So, I need to provide first name + lastname into a disabled form input. Right now I'm just providing the user_id.

The template with the disabled field in which the name and lastmane shoud be shown:

<div class="col-sm-5">
    <label for="petitioner">Petitioner</label>
    <input [(ngModel)]="data.petitioner" type="text" class="form-control" name="petitioner" disabled>
</div>

The home component, from which a function is called to load the petitioner user_id from backend:

constructor(private workflowService: WorkflowService, private parametersService: UrlParametersService, private _ref: ChangeDetectorRef) {

this.formMode = parametersService.formMode;

  // origin:  /API/system/session/unusedId
  this.workflowService.loadPetitioner().subscribe(
    res => {
      this.data.petitioner= res;
    }
  );

The workflow.service that contains that function:

constructor(private http: Http, private parametersService: UrlParametersService, private router: Router, private _configurations: ConfigurationsService) {}

public loadPetitioner(): Observable<string> {
  return this.http.get("/API/system/session/unusedId", {withCredentials: true}).map(value => value.json().user_name);
}

I tried different chaining ways, but all failed. If I call to /API/identity/user/403, so providing a user_id hardcoded, then it works fine getting firstname + lastname. Like this:

getPetitionerFirstNamePlusLastName(): Observable<string>{
return this.http.get("/API/identity/user/403",  {withCredentials: true}).map(value =>(value.json().firstname + " " +  value.json().lastname));
}

I seems that there is an async problem here, but I cannot resolve it, even after having checked other similar issues.

Answer 1

Give this a try

this.workflowService.loadPetitioner().concatMap( res => {
      let id = res;
      return this.getPetitionerFirstNamePlusLastName(id);
}).subscribe( res => {
      // Do stuff with the user
});

And in the getPetitionerFirstNamePlusLastName add id as an argument

getPetitionerFirstNamePlusLastName(id:number): Observable<string>{
     return this.http.get("/API/identity/user/" + id,  {withCredentials: true}).map(value =>(value.json().firstname + " " +  value.json().lastname));
}