Angular2 multiple REST endpoint calls

Question

I'm trying to use more than one REST endpoint call in my angular 2 component. The problem is, that I'm not getting any data from no one of them. What I do is this:

getData() {
   myService.getDataA().subscribe(data => { this.dataA = data })
   myService.getDataB().subscribe(data => { this.dataB = data })
   myService.getDataC().subscribe(data => { this.dataC = data })

And my service is:

getDataA() {
   return this.http.get(MY_URL).map(data => data.json());

getDataB() {
   return this.http.get(MY_URLB).map(data => data.json());

getDataC() {
   return this.http.get(MY_URLC).map(data => data.json());

Is there a way how to wait untill all async task are completed and then show the template?

Thank you

You can check in template if `this.dataA`, `this.dataB` and `this.dataC` are not null and are defined — Maxim, Sep 19 '17 at 13:56

score 0 · Answer 1 · answered Sep 19 '17 at 13:52

0

You could join the observables, see https://www.learnrxjs.io/operators/combination/forkjoin.html

answered Sep 19 '17 at 13:52

mbnx

912
5
11

score 0 · Answer 2 · answered Sep 19 '17 at 14:07

0

Do something like this

Observable.forkJoin(getDataA(), getDataB(), getDataC()).subscribe(response => {
response[0] //contain getDataA response
response[1] //contain getDataB response
response[2] //contain getDataC response
}, e => { //get the errors });

answered Sep 19 '17 at 14:07

Antoine Clavijo

1,277
2
11
19

Unfortunately I tried this and I'm still getting undefined when I try to use console.log for the output. I noticed I'm not getting console.log from subscribe method. But when I check developer console, the backend was called. – George Sep 20 '17 at 07:21

Angular2 multiple REST endpoint calls

2 Answers2