Convert observable of array of observable into observable of array

Question

I am trying to query database. Iterate over list of results and for each item execute one more request. At the end of rxjs construction I have Observable<Observable<Timesheet>[]>. But I need to have Observable<Timesheet[]>. How to do that?

this.caseService.getElapsedCases(date).pipe(
  map(elapsedCases => elapsedCases.map(elapsedCase => {
    return this.caseService.findOneById(elapsedCase.caseId).pipe(
      map(loadedCase => {
        const timesheet: Timesheet = {
          id: elapsedCase.id,
          start: elapsedCase.start,
          end: elapsedCase.end,
          case: loadedCase,
          isActive: false
        };

        return timesheet;
      })
    );
  }))
);

Roberto Zvjerković · Accepted Answer · 2019-07-15 12:14:25Z

1

You need to forkJoin separate requests and mergeMap to source:

const loadElapsedCase: Observable<TimesheetEnt[]> = getElapsedCase().pipe(
  mergeMap(elapsedCases => elapsedCases.map(elapsedCase => {
    return forkJoin(findOneById().pipe(
      map(loadedCase => {
        return {
          id: elapsedCase.id,
          title: elapsedCase.title,
          case: loadedCase
        };
      }))
    );
  }))
);

answered Jul 15, 2019 at 12:14

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

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

Comments

Wilgert · Accepted Answer · 2019-07-15 15:43:41Z

0

Use mergeMap + forkJoin! mergeMap combines the values emitted by multiple Observables into one Observable. forkJoin allows you to wait for the result of a list of Observables and combine the results of all those Observables as a list (comparable to Promise.all). See: https://rxmarbles.com/#mergeMap and https://rxmarbles.com/#forkJoin

Thanks to the answer of ritaj I learned it should be forkJoin. This works:

const loadElapsedCase: Observable<TimesheetEnt[]> = getElapsedCase().pipe(
  mergeMap(elapsedCases => 
    forkJoin(
      elapsedCases.map(elapsedCase => {
        return findOneById().pipe(
          map(loadedCase => {
            return {
              id: elapsedCase.id,
              title: elapsedCase.title,
              case: loadedCase
            };
          })
        );
      })
    )
  )
);

In the StackBlitz: https://stackblitz.com/edit/rxjs-zidltc?file=index.ts

edited Jul 15, 2019 at 15:43

answered Jul 15, 2019 at 8:54

Wilgert

7061 gold badge6 silver badges24 bronze badges

4 Comments

dmitrdv Over a year ago

It is not working. Unfortunately type of result for first solution is Observable<Observable<Timesheet>> and not Observable<Timesheet[]>. Second options is not compiled because elapsedCase is not defined

dmitrdv Over a year ago

thanks for helping, please check : stackblitz.com/edit/rxjs-dapk33

Wilgert Over a year ago

Your stackblitz is now just the rxjs playground. You probably need to save your changes.

dmitrdv Over a year ago

sorry, check it now

Collectives™ on Stack Overflow

Convert observable of array of observable into observable of array

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related