How to execute another observable based on array from result returned from another one

Question

I have a quite simple situation but i got stuck. I have function customGalleriesHttpService.list() which returns observable with array of items. Lets assume:

[
{id:1,
... other stuff
},
{id:2,
... other stuff
}
]

Now I want to take each element from this array and make an extra http request customGalleriesHttpService.images(data.id) which returns observable with array of images for particular elemend based on his id. What i achived so far.

    this.customGalleriesHttpService.list().pipe(
      concatMap((data) => data),
      mergeMap((data) => this.customGalleriesHttpService.images(data.id)),
    ).subscribe((data) => console.log(data));

it is working but there is on more thing. It gives me output like this:

Array[6], Array[6]

what i want to achive is to group this and return [Array[6], Array[6]]

Fan Cheung · Accepted Answer · 2022-01-12 06:46:52Z

2

Add a toArray() operator before subscribe should work

this.customGalleriesHttpService.list().pipe(
  concatMap((data) => data),
  mergeMap((data) => this.customGalleriesHttpService.images(data.id)),
  toArray(), 
).subscribe((data) => console.log(data));

answered Jan 12, 2022 at 6:46

Fan Cheung

11.5k3 gold badges22 silver badges42 bronze badges

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

1 Comment

obaram Over a year ago

This is exactly what I needed. Big thanks! You saved my day! :)

Collectives™ on Stack Overflow

How to execute another observable based on array from result returned from another one

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related