Rxjs - How can I extract multiple values inside an array and feed them back to the observable stream synchronously

最后都变了- 提交于 2019-11-29 07:56:10

The family of xxxMap() operators all deal with higher-order Observables. Which means they allow you to create Observables inside the main Observable and inline the resulting values into the primary stream. So you could read the type signature as Observable<Observable<T>> => Observable<T>

Given a stream which every emission x is an Observable containing 4 value emissions:

input:  --x----------x 
flatMap   a-a-a-a-|  b-b-b-b-|
result: --a-a-a-a----b-b-b-b-|

Typecasting xxxMap(myFnc) return values

The xxxMap() operators all work with results of type Observable, Promise or Array. Depending on what you put into it will get converted to Observable if needed.

Rx.Observable.of('')
  .flatMap(() => [1,2,3,4])
  .subscribe(val => console.log('array value: ' + val));

Rx.Observable.of('')
  .flatMap(() => Promise.resolve(1))
  .subscribe(val => console.log('promise value: ' + val));

Rx.Observable.of('')
  .flatMap(() => Promise.resolve([1,2,3,4]))
  .subscribe(val => console.log('promise array value: ' + val));

Rx.Observable.of('')
  .flatMap(() => Rx.Observable.from([1,2,3,4]))
  .subscribe(val => console.log('Observable value: ' + val));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script>

In your case you can easily flatMap the objects and return the arrays:

Rx.Observable.of({ error: null, alternatives: ['result1', 'result2', 'result3'] })
  .flatMap(val => val.alternatives)
  .subscribe(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script>

Difference between all xxxMap operators

What does mergeMap do

flatMap, better known as mergeMap will merge all emissions whenever they come into the main stream.

concatMap

concatMap will wait for all emissions to complete before concat the next stream:

switchMap

but switchMap will abandon the previous stream when a new emission is available and switch to emit values from the new stream:

You should pluck "alternatives" then to iterate over the array use from, as from creates a new observable you need to flatten up it, so use you need flatMap to do the job. So finally you have alternatives back into the stream.

try it:

var data = {
  error: null,
  alternatives: [{
    result: 1
  }, {
    result: 2
  }, {
    result: 3
  }]
}

var input$ = Rx.Observable.of(data);
input$.pluck('alternatives').flatMap(alternatives => Rx.Observable.from(alternatives)).subscribe(alternative => console.log(alternative));
<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>

Operators flatMap() and concatMap() are both a good choice. You can just turn the alternatives property to another Observable and then emit the array items merged into the stream.

const Observable = Rx.Observable;

Observable.of({ error: null, alternatives: ['result1', 'result2', 'result3'] })
  .concatMap(val => {
    return Observable.from(val['alternatives']);
  })
  .subscribe(val => console.log(val));

This prints to console:

result1
result2
result3

See live demo: https://jsbin.com/foqutab/2/edit?js,console

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!