CODEWITHSUNDEEP
rxjs
Jarosław Rewers
Jarosław Rewers

Reputation: 1099

RxJS: forkJoin mergeMap

I'm trying to make multiple http requests and get returned data in one object.

const pagesToFetch = [2,3]
const request$ = forkJoin(
  from(pagesToFetch)
    .pipe(
      mergeMap(page => this.mockRemoteData(page)),
    )
)

mockRemoteData() return a simple Promise. After first Observable emits (the once created from first entry of pagesToFetch the request$ is completed, second value in not included. How can I fix this?

Upvotes: 1

Views: 8102

Answers (2)

martin
martin

Reputation: 96979

You can turn each value in pagesToFetch into an Observable and then wait until all of them complete:

const observables = pagesToFetch.map(page => this.mockRemoteData(page));

forkJoin(observables)
  .subscribe(...);

Or in case it's not that simple and you need pagesToFetch to be an Observable to collect urls first you could use for example this:

from(pagesToFetch)
  .pipe(
    toArray(),
    mergeMap(pages => {
      const observables = pages.map(page => this.mockRemoteData(page));
      return forkJoin(observables);
    }),
  )
  .subscribe(...);

Upvotes: 6

Karthick Srinivasan
Karthick Srinivasan

Reputation: 93

Try the below sample format...

Observable.forkJoin(
   URL 1,
   URL 2
 ).subscribe((responses) => {
   console.log(responses[0]);
   console.log(responses[1]); 
 },
  error => {console.log(error)}
 );

Upvotes: 0

Related Questions