I’m new to rxjs and stuck with a simple task. Say I have one stream with array:
var array$ = Rx.Observable.just([1, 2, 3, 4, 5]);
And I have another stream of clicks:
var click$ = Rx.Observable.fromEvent(
document.getElementById('button'),
'click'
)
How do I combine them to get each element from array on each click (1 on first click, 2 on second and so on)?
There are many ways to do this. A simple one is as follows:
var click$ = Rx.Observable.fromEvent(
document.getElementById('button'),
'click'
);
var combined$ = otherButtonClick$.flatMapLatest(function (){
return click$
.map(function(value, index){return index;})
.withLatestFrom(array$, function(index, array){return array[index];})
});
Is there a bigger goal you are trying to achieve through this?
0? I’m getting an array from server and when I click another button the array stream emits another array and I want to be able to traverse it from 0-index again.
flatMapLatest operator. Try it, I can see some possible issues but the best is to try first.withLatestFrom by combineLatest.just() is going to return the whole array. You want to use fromArray() to create the first stream. Then you can zip the two arrays together to get the next element in the array stream:
var array$ = Rx.Observable.fromArray([1, 2, 3, 4, 5]);
var click$ = Rx.Observable.fromEvent(
document.getElementById('button'),
'click'
).zip(array$, function(click, num) {return num}).subscribe(function(el){
return el;
})<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.js"></script>
<button id="button">
button
</button>
You'll need to use some back pressure mechanism like:
Example 1:
var array$ = Rx.Observable.from([1, 2, 3, 4, 5]).controlled;
var click$ = Rx.Observable.fromEvent(
document.getElementById('button'),
'click'
)
array$.subscribe(function(value){ console.log(value); });
click$.subscribe(function(){
array$.request(1);
})
Example 2 (Using combine)
var array$ = Rx.Observable.from([1, 2, 3, 4, 5]).controlled;
var click$ = Rx.Observable.fromEvent(
document.getElementById('button'),
'click'
)
click$.flatMap(function(){
return Rx.Observable.create(function(observer){
array$.first().subscribe(observer);
array.request(1);
}
})
.subscribe(function(value){ console.log(value); });
