Angular - Nested API calls with iteration

Question

Is there a better way to achieve this (getting all users with their photos) :

this.authHttp.get(this.ApiUrl+'users')
.map(res => res.json())
    .subscribe(users => {
        for (let user of users) {
            this.authHttp.get(this.ApiUrl+'users/'+user.id+'/photos')
            .map(res => res.json())
            .subscribe(photos => {
                user['photos'] = photos;
                this.items.push(user);
            })
        }
    });

Maybe using mergeMap ?

Thank you for your advice

Julien

Thanks, the problem is that I cannot find how to iterate through users with mergeMap. — bidou88
– bidou88, Commented Jul 17, 2017 at 12:01

Mark van Straten · Accepted Answer · 2017-07-17 19:44:02Z

3

I'm assuming that res.json() is a sync call returning the json as object so you can chain on it:

this.authHttp.get(this.ApiUrl+'users')
.mergeMap(res = res.json().users)
.mergeMap(
  user => this.authHttp.get(this.ApiUrl+'users/'+user.id+'/photos'),
  (user, photosRes) => { 
    user['photos'] = photosRes.json(); 
    return user; 
   }
)
.subscribe(user => this.items.push(user));

This code example uses the mergeMap overload which takes a mapFunc(outer,inner) so you have access to both and can merge them together as you see fit.

edited Jul 17, 2017 at 19:44

answered Jul 17, 2017 at 12:11

Mark van Straten

9,4553 gold badges41 silver badges57 bronze badges

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

Collectives™ on Stack Overflow

Angular - Nested API calls with iteration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related