Getting data from another array whilst looping through first array

I’ve fetched one set of data via a http json api request and am looping through that on a view. Whilst doing this i need take the an id that gets sent and use that id to loop through data from another http josn api request and get the name of something out. Basically i get the brewery id in the first call and then i need to use that id to go and fetch the name from another api request which gives me the full details of the all the breweries (so i need to find the specific id ad get the name of it).

This is my html page


  <ion-list  [virtualScroll]="filteredBeers" class="main-beer-list">


<!--   <ion-item-group *ngFor="let bar of bars" [hidden]="bar === 'all'">
      <ion-item-divider>{{bar.name}}</ion-item-divider>
   -->


      <ion-item *virtualItem="let beer " id="{{beer?.drink_id}}" class="main-beer-list"  (click)="itemTapped(beer.drink_id)">

<ion-grid>
  <ion-row>
   <ion-col col-2><div class="item-note" item-right>
         <ion-badge color="secondary"> {{beer?.drink_id}}</ion-badge>
        </div></ion-col>
         <ion-col col-6><p class="list-beer-name">{{beer?.name}}</p>
         <p class="list-brewery-name" >{{beer?.brewery_id}}  </p></ion-col>
    <ion-col col-2><div class="list-bar"> Bar<br>{{beer?.bar}}</div></ion-col>
   
    <ion-col col-1> <p class="list-abv"> {{beer?.abv}} % <br> ABV</p></ion-col>
   

      
      
        
     
       

       
  </ion-row>
 </ion-grid>
      </ion-item>


 <!--  </ion-item-group >  -->


  </ion-list>

My advice is to do this as far from the template as possible. Best case, I would do it on the server: always sending the necessary details on the first call, reducing network ping-ponging as much as I can. If I can’t do that, I would do it all in the service provider that is making the HTTP calls. By the time the data ever gets to the page, it is all fully populated with the details.

Unfortunately i can really change much on the server for this. Is there something i can do to combine two http api calls into one array or database?

Sure. You should be able to adapt something like this:

getAllBeerDetails(): Observable<Beer[]> {
  return this.getAllBeerIds()
    .mergeMap(ids => Observable.forkJoin(ids.map(id => this.beerDetailsById(id))));
}

getAllBeerIds(): Observable<string[]> {
  return this.http.get(urla);
}

beerDetailsById(id: string): Observable<Beer> {
  return this.http.get(urlb + id);
}