Passing an array from an api call to a second api call

Question

I am trying to make 2 api calls where one api gets the array of IDs that I needed to make another api call according to the IDs that were returned with some object where I can manipulate into displaying some form inputs according to the data I received from it.

But I am now stuck while attempting to make the second call. Any advice on how I could make the second call would be appreciated.

//api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  baseurl = 'http://localhost:5000';

  constructor(private http: HttpClient) { }

  getIds(id){
    return this.http.get(this.baseurl + '/types/' + id);
  }

  getCustomFieldsById(id){
    return this.http.get(this.baseurl + '/types/fields/' + id );
  }
}

//custom.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ApiService } from '../api.service';
import { map, mergeMap, switchMap } from 'rxjs/operators';


@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html'
})

export class CustomComponent implements OnInit {

  constructor(private apiService: ApiService) {
  }

  ngOnInit(){
  }

  getCustomFields(id){
    this.apiService.getIds(id)
    //this returns an obj in which arrayData constains an array of ids that is needs to be passed into the other api call
    .pipe(
      map((obj: any) => {
        //trying to map the array from the obj
        const data = obj.arrayData;
        return data;
      }),
      mergeMap(data =>
          //data here is an array of ids
          //suppose to receive the ids from the arrayData above 
          this.apiService.getCustomFieldsById(data)
      )
    ).subscribe(response => {
      console.log(response);
    });
  }
}

score 1 · Accepted Answer · answered Jul 03 '20 at 04:28

If you want to get a series of id which in ids(arrayData), you can use switchMap instead of map:

this.apiService.getIds(id)
    .pipe(
      switchMap((obj: any) => {
        const data = obj.arrayData;
        return data;
      }),
      mergeMap(id =>
          this.apiService.getCustomFieldsById(id)
      ),
    ).subscribe(response => {
      console.log(response); // response is a series of CustomField
    });

Or if you want to get a list of customFields, you can use forkJoin:

this.apiService.getIds(id)
    .pipe(
      map((obj: any) => {
        const data = obj.arrayData;
        return data;
      }),
      mergeMap(ids =>
          forkJoin(ids.map(id => this.apiService.getCustomFieldsById(id)))
      ),
    ).subscribe(response => {
      console.log(response); // response is CustomFields[]
    });

Thanks for your answer, I've tried your way but now i am hit with TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. Anywhere in between this that i did wrong? Edit: Ok never mind. I made it to work now. Thanks again for your help! — AndrewC, Jul 06 '20 at 00:32
@AndrewC sorry for just saw it, so glad to hear you got it ! — songzhj, Jul 06 '20 at 02:29

Passing an array from an api call to a second api call

1 Answers1