Angular 6 mergeMap for nested api calls

Question

With the traditional observable/subscribe pattern I am trying to get a list of clients, with each of those clients get a list of their accounts with client.id

Here's what that looks like:

this.httpService.getClients().subscribe(clients => {
    clients.forEach(client => {
        this.httpService.getClientAccount(client.id).subscribe(accounts => {
            console.log(accounts);
        });
    });
});

Now I'm trying to do this with mergeMap. I do not think I'm doing it correctly as when I pass in client.id to the second call it is showing as undefined.

this.httpService.getClients().pipe(
    mergeMap(client => this.httpService.getClientAccount(client.id))
).subscribe(result => console.log(result))

Can anyone point out what I'm doing wrong here? I tried using tap() to console log the client inside mergeMap but nothing showed up. I'm not sure how to reference the response from the first getClients() call.

The object emitted by the source Observable is a list of clients still. — Tim Klein, Apr 30 '19 at 15:36
Yes, how do I get each individually? I just use the forEach in the first way but how do I do it with mergeMap? — Vincent Nguyen, Apr 30 '19 at 15:42
Might consider [forkJoin](https://www.learnrxjs.io/operators/combination/forkjoin.html) instead for the scenario. — Chris W., Apr 30 '19 at 15:46
@ChrisW. I would still need to know how to use it in my example above... — Vincent Nguyen, Apr 30 '19 at 15:47

score 0 · Answer 1 · answered Apr 30 '19 at 15:59

Here is an example of how to use forkJoin as mentioned above by Chris W.:

const outerObservable = of([0, 1, 2, 3, 4]);

outerObservable.pipe(
    mergeMap(inputs => forkJoin(inputs.map(input => rxjs.of(input)))),
);

outerObservable.subscribe(console.log);

See example 3 from this page and example 1 for info on how to use a dictionary approach.

score 0 · Answer 2 · answered Apr 30 '19 at 16:10

I'm not sure if this is correct way to do it but this returns each account for each client:

this.clientService.getAllClients().pipe(
    mergeMap(clients => clients)).pipe(
    mergeMap((client:any) => this.accountService.getClientAccts(client.id)))
    .subscribe(res=>console.log(res));

The first mergeMap flattens the clients array to each individual client I believe then can use client.id to make the second call.

Angular 6 mergeMap for nested api calls

2 Answers2