angular - Chaining RxJS Observables from http data in Angular2 with TypeScript -

i'm trying teach myself angular2 , typescript after happily working angularjs 1.* last 4 years! have admit hating sure eureka moment around corner... anyway, have written service in dummy app fetch http data phoney backend wrote serves json.

import {injectable} 'angular2/core'; import {http, headers, response} 'angular2/http'; import {observable} 'rxjs';  @injectable() export class userdata {      constructor(public http: http) {     }      getuserstatus(): {         var headers = new headers();         headers.append('content-type', 'application/json');         return this.http.get('/restservice/userstatus', {headers: headers})             .map((data: any) => data.json())             .catch(this.handleerror);     }      getuserinfo(): {         var headers = new headers();         headers.append('content-type', 'application/json');         return this.http.get('/restservice/profile/info', {headers: headers})             .map((data: any) => data.json())             .catch(this.handleerror);     }      getuserphotos(myid): {         var headers = new headers();         headers.append('content-type', 'application/json');         return this.http.get(`restservice/profile/pictures/overview/${ myid }`, {headers: headers})             .map((data: any) => data.json())             .catch(this.handleerror);     }      private handleerror(error: response) {         // logging console now...         console.error(error);         return observable.throw(error.json().error || 'server error');     }    } 

now in component wish run (or chain) both getuserinfo() , getuserphotos(myid) methods. in angularjs easy in controller avoid "pyramid of doom"...

// old angularjs 1.* userdata.getuserinfo().then(function(resp) {     return userdata.getuserphotos(resp.userid); }).then(function (resp) {     // more stuff... });  

now have tried doing similar in component (replacing .then .subscribe) error console going crazy!

@component({     selector: 'profile',     template: require('app/components/profile/profile.html'),     providers: [],     directives: [],     pipes: [] }) export class profile implements oninit {      userphotos: any;     userinfo: any;      // userdata service     constructor(private userdata: userdata) {     }      ngoninit() {          // need pass own id here...         this.userdata.getuserphotos('123456') // todo: parent or userdata service             .subscribe(             (data) => {                 this.userphotos = data;             }         ).getuserinfo().subscribe(             (data) => {                 this.userinfo = data;             });     }  } 

i'm doing wrong... how best observables , rxjs? sorry if asking stupid questions... in advance! have noticed repeated code in functions when declaring http headers...

for use case, think flatmap operator need:

this.userdata.getuserphotos('123456').flatmap(data => {   this.userphotos = data;   return this.userdata.getuserinfo(); }).subscribe(data => {   this.userinfo = data; }); 

this way, execute second request once first 1 received. flatmap operator particularly useful when want use result of previous request (previous event) execute one. don't forget import operator able use it:

import 'rxjs/add/operator/mergemap'; 

this answer give more details:

• angular 2 http typescript error http.get(...).map not function in [null]

if want use subscribe method, use that:

this.userdata.getuserphotos('123456')     .subscribe(       (data) => {         this.userphotos = data;          this.userdata.getuserinfo().subscribe(           (data) => {             this.userinfo = data;           });       }); 

to finish, if want execute both requests in parallel , notified when results then, should consider use observable.forkjoin:

observable.forkjoin([   this.userdata.getuserphotos(),   this.userdata.getuserinfo()]).subscribe(t=> {     var firstresult = t[0];     var secondresult = t[1]; });