Angular dynamic api call

Question

Trying to call a list of apis obtained from first api call

loadData() {
  this.http.get(this.firstApi).pipe(
    .map(response => response.ip)
        )
      .subscribe(ip => {
        console.log(ip);

        Observable.forkJoin(
          ip.map(
             g =>
             this.http.get('http://'+ip+':port/api/status')
             .map(response => response.json())
           )
         ).subscribe(res => {
             //THIS WILL LOG GAME RESULTS SUCH AS HITS/PITCHES/STOLENBASES/RUNS...
             let i;
             res.forEach((item, index) => {
               i = index;
               console.log(res[i]);
             })
          })
   });
}

The issue is that ip is undefined. Any way to solve the issue.

Generally what I need is

Call an api -> returns list of object with ip key and other stuff (ip is relevant). Call status api (returns a json object) in each of the ip obtained and push the result to an array.

If ip is undefined then debug response, it might not have ip as a direct key — Ashish Ranjan
– Ashish Ranjan, Commented Dec 3, 2018 at 8:07
the return value of firstApi is an array of objects [{'ip':'192.168.0.1',..},{'ip':'192.168.0.2',..},..] — Azeeb
– Azeeb, Commented Dec 3, 2018 at 8:44
Well, an array doesn't have an ip property. It only has a length property. So response.ip doesn't make sense if response is an array. Everything would be so much clearer if you defined and specified types: this.http.get<Array<{ip: string;}>> — JB Nizet
– JB Nizet, Commented Dec 3, 2018 at 8:47

Ashish Ranjan · Accepted Answer · 2018-12-03 09:22:39Z

1

I believe you are getting confused with rxjs map and Array map. The map inside pipe() is by rxjs, you can leverage on this to modify the returned Observable. Array map returns a new Array. I see that you are doing two subscriptions, instead of doing this, you can use mergeMap to faltten the returned Obervable. ALso to make Observables for forkJoin before hand, this will make the code clear.

loadData() {
  this.http.get(this.firstApi).pipe(
    mergeMap((firstResponse) => {
      let obsevablesArray = firstResponse.map((eachOb) => this.http.get(`http://${eachOb.ip}:port/api/status`)); //  map from Array prototype
      return forkJoin(...obsevablesArray)
    })
  ).subscribe((dataFromAllIp) => {
      console.log(dataFromAllIp);
      // do the rest of your logic here.
  })
}

I have given a similar answer here. Refer if it helps you.

answered Dec 3, 2018 at 9:22

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Azeeb Over a year ago

Thanks for the answer. Tried the answer given in the stackblitz link. But I get error Property map and foreach does not exist on type Object.

Ashish Ranjan Over a year ago

@Azeeb: The link added in the answer is just for your reference, this doesn't exactly answer your question. For your .ts error try adding the return type as advised by @JB Nizet. You can try it just here: this.http.get<Array<{ip: string;}>>(this.firstApi)

Ashish Ranjan Over a year ago

you can have an interface which contains all the props returned by firstApi and make the return type as an array of that interface

Azeeb · Accepted Answer · 2018-12-03 12:45:03Z

0

Is there something to obtain below mentioned scenario

Call an api -> returns list of object with ip key and other stuff (ip is relevant). Call status api (returns a json object) in each of the ip obtained and push the result to an array.

Whenever an api return push the result to an array?

answered Dec 3, 2018 at 12:45

Azeeb

9113 bronze badges

Collectives™ on Stack Overflow

Angular dynamic api call

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related