Best way to "flatten" an array inside an RxJS Observable
Solution 1:
You can use concatAll()
or mergeAll()
without any parameter.
dataFromBackend.pipe(
tap(items => console.log(items)),
mergeAll(), // or concatAll()
)
This (including mergeMap
) works only in RxJS 5 because it treats Observables, arrays, array-like objects, Promises, etc. the same way.
Eventually you could do also:
mergeMap(val => from(val).pipe(
tap(item => console.log(item)),
map(item => item.name),
)),
toArray(),
Jan 2019: Updated for RxJS 6
Solution 2:
Actually if you need it inside the stream just use this:
.flatMap(items => of(...items))
Solution 3:
Angular 6 note.
If you are using as a pipeable operator, do is known as tap!
https://www.learnrxjs.io/operators/utility/do.html Here is an example.
// RxJS
import { tap, map, of, mergeMap} from 'rxjs/operators';
backendSource
.pipe(
tap(items => console.log(items)),
mergeMap(item => item ),
map(item => console.log(item.property))
);
Solution 4:
If it is a synchronous operation, I would suggest to use javascript's Array.map
instead, it even should save you some performance:
const dataFromBackend = Rx.Observable.of([
{ name: 'item1', active: true },
{ name: 'item2', active: false },
{ name: 'item3', active: true }
]);
dataFromBackend
.map(items => items.map(item => item.name))
.subscribe();