RxJS/Observable flatMap can return Observable or array

Question

Can someone explain to me why the .flatMap operator can accept a function which returns an Observable, or an array?

The official docs say:

The FlatMap operator transforms an Observable by applying a function that you specify to each item emitted by the source Observable, where that function returns an Observable that itself emits items.

Why can it also return an array?

For example, these are both valid:

obs$.flatMap((data) => {
    return [];
});

obs$.flatMap((data) => {
    return new Observable<string>();
});

But this does not work:

obs$.flatMap((data) => {
    return 1;
});

Observables can be thought of as arrays spread over time, so flattening an array is like flattening a synchronous observable. 1 is neither an array nor an observable, so of course it doesn't work. — cartant
– cartant, Commented Jul 23, 2017 at 0:18
flatMap is an alias for mergeMap. Check the docs and you will see the function can return an observable, a promise, or an array-like value: reactivex.io/rxjs/class/es6/… — cartant
– cartant, Commented Jul 23, 2017 at 0:22
Specifically, it can return an ObservableInput: reactivex.io/rxjs/class/es6/… — cartant
– cartant, Commented Jul 23, 2017 at 0:24
Thanks, that helped my understanding of it a lot, did not realise it was ObservableInput. So how can .flatMap return an array of Observables? Or is that not possible? — Dolan
– Dolan, Commented Jul 23, 2017 at 0:32
If you call flatMap on an array of observables, you'll get an observable of observables - termed a higher-order observable. There are operators to further flatten such higher-order observables. Look at mergeAll and concatAll. Also, if the links have helped you understand things, you might want to consider adding a self answer. — cartant
– cartant, Commented Jul 23, 2017 at 0:55

Estus Flask · Accepted Answer · 2017-07-23 03:39:36Z

7

The official docs are not relevant because they refer to RxJS 4 and not RxJS 5.

mergeMap projection function returns not just Observable but ObservableInput interface, which applies to miscellaneous values that can be converted to observables:

Arrays can be interpreted as observables that emit all values in array one by one, from left to right, and then complete immediately.

This means that

obs$.flatMap((data) => arr)

is basically a shorter version of

obs$.flatMap((data) => Observable.from(arr))

edited Jul 23, 2017 at 3:39

answered Jul 23, 2017 at 1:16

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

1 Comment

Dolan Over a year ago

Thanks! That helped me understand it much more

Collectives™ on Stack Overflow

RxJS/Observable flatMap can return Observable or array

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