How to combine data from two endpoints via observables?

Question

I have a setup on the backend where I fetch users info from one endpoint and their profile photos from another one.

I need to first fetch users and then their photos before displaying anything on the screen.

I've got a following interface

interface User {
  id: string;
  name: string;
  email: string;
  photoUrl?: string;
}

and two functions that return observables: getUsers and getUserPhoto.

I make the call like so:

this.getUsers().pipe(
  map((users: User[]) => {
    return users.forEach(user => {
      // this part is problematic as I don't know how to call it properly
      return this.getUserPhoto(user.id)
    })
  })
);

Ideally, the end result of this call should be a User array with all properties including photoUrl.

use pipe on map and inside map operator, use Array.map().

Sidhanshu_
– Sidhanshu_

2019-11-04 10:16:47 +00:00
Commented Nov 4, 2019 at 10:16 — Sidhanshu_
– Sidhanshu_, Commented Nov 4, 2019 at 10:16
can you please show an example? It's unclear to me

Ruslan
– Ruslan

2019-11-04 10:19:37 +00:00
Commented Nov 4, 2019 at 10:19 — Ruslan
– Ruslan, Commented Nov 4, 2019 at 10:19

cuddlemeister · Accepted Answer · 2019-11-04 10:40:18Z

2

Try this


this.getUsers.pipe(
    switchMap(users => {
        return forkJoin(users.map(user => this.getPhoto(user.userPhotoUrl).pipe(map(photo => ({...user, photo})))))
})
)

you will have an array of users with photo property

answered Nov 4, 2019 at 10:40

cuddlemeister

1,81516 silver badges17 bronze badges

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

Comments

Bilel-Zheni · Accepted Answer · 2019-11-04 10:20:54Z

0

You can use concat operator from rxjs to chain your api calls, follow this link for more details : https://www.learnrxjs.io/operators/combination/concat.html

answered Nov 4, 2019 at 10:20

Bilel-Zheni

1,3121 gold badge7 silver badges10 bronze badges

1 Comment

Ruslan Over a year ago

I don't think it works in my case. Because the second http call result should update the results of the first http call, and not just concatenate results of two http calls.

Collectives™ on Stack Overflow

How to combine data from two endpoints via observables?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related