RxJs - transform array of Observables to an array of emitted values

Question

Sorry for the title, I couldn't think of a better one.
I've got this piece of code, which basically:

filter for valid (non-null) cron epressions' arrays
map each cron expression to a call to a service

this.formGroup.valueChanges.pipe(
    op.filter(v => !!v.cronExpressions),
    op.map((v): string[] => v.cronExpressions),
    op.map((v: string[]) => v.map(cron =>
            this.cronService.getReadableForm(cron).pipe(
                op.map(this.toDescription),
                op.map((description): CronExpressionModel => ({ cron, description }))
            )
        )
    ),
    // What now?
).subscribe((cronExpressions: CronExpressionModel[]) => ...) // Expected result

I'd like to get, on subscribe(), the array of CronExpressionModel returned from all the services calls.

I can't wrap my head around this.

Current solution, as per Martin answer:

filter(v => !!v.cronExpressions),
map(v => v.cronExpressions),
map(cronExprs => cronExprs.map(c => this.invokeCronService(c))),
mergeMap(serviceCalls => forkJoin(serviceCalls).pipe(defaultIfEmpty([])))

madjaoue · Accepted Answer · 2018-12-18 13:05:14Z

2

To transform a stream into an array, you can use toArray operator.

Here's a suggestion:

this.formGroup.valueChanges.pipe(
    filter(v => !!v.cronExpressions),
    // transform [item1, item2...] into a stream ----item1----item2----> 
    concatMap((v): Observable<string> => from(v.cronExpressions).pipe(
        // for each of the items, make a request and wait for it to respond
        concatMap((cron: string) => this.cronService.getReadableForm(cron)),
        map(this.toDescription),
        map((description): CronExpressionModel => ({ cron, description })),
        // wait for observables to complete. When all the requests are made, 
        // return an array containing all responses
        toArray()
      )
    ).subscribe((cronExpressions: CronExpressions[]) => ...) // Expected result

Note :

You can use mergeMap instead of concatMap to parallelize the requests. But you need to know what you're doing ;)

edited Dec 18, 2018 at 13:05

answered Dec 14, 2018 at 15:18

madjaoue

5,2142 gold badges21 silver badges32 bronze badges

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

10 Comments

LppEdd Over a year ago

Uhh, that's starting to become complicated hahaha. Could you clarify why you're transforming the string array to an Observable array with the first ConcatMap?

madjaoue Over a year ago

if you use ...map( (sArray: string[ ]) => sArray.map( v=> anObservable)) you'll get something like : [Obs1, Obs2, Obs3...] as output. You don't want to create N streams, I guess. With this implementation, you will have to use a forkJoin, or subscribe to each element of your array of observables. I think that it's more elegant to rely on one single stream. ----RawItem1---RawItem2--- > that you transform into ---RaffinedItem1---RaffinedItem2--- etc. and wait for the stream to end. The idea of using the first concatMap is to always keep one single stream.

LppEdd Over a year ago

Ok, give me a couple minutes the process what you just wrote

LppEdd Over a year ago

So, I was trying out your solution, but apparently toArray is never called, because valueChanges never complete

madjaoue Over a year ago

@LppEdd I didn't know that your original Observable doesn't complete. I just updated my answer, I think now it's working.

|

martin · Accepted Answer · 2018-12-14 15:11:45Z

2

You can just add forkJoin if you don't mind running all requests in parallel:

switchMap(observables => forkJoin(...observables))

Or if you want to run all of them in sequence:

switchMap(observables => concat(...observables).pipe(toArray()))

Instead of switchMap you might want to use concatMap or mergeMap depending on what behavior you want.

answered Dec 14, 2018 at 15:11

martin

97.4k26 gold badges205 silver badges237 bronze badges

Collectives™ on Stack Overflow

RxJs - transform array of Observables to an array of emitted values

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related