RxJs Sandbox

combine all, flatmap demo

by reesewill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.1.0/rxjs.umd.min.js"></script>
<div class="dropdown-wrap">
  <input type="text" class="dropdown">
  <ol class="dropdown-options">
    <li class="dropdown-option">Earth</li>
    <li class="dropdown-option">Wind</li>
    <li class="dropdown-option">Water</li>
    <li class="dropdown-option">Fire</li>
  </ol>
</div>


<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>

CSS

.output {
  background: #fff;
  line-height: 1.3em;
}

JavaScript

function write(val) {
	var output = document.querySelector('.output');
  
  if (output.innerHTML) {
  	output.innerHTML += '<br>' + val;
  } else {
  	output.innerHTML = val;
  }
}

var btnA = document.querySelector('.emittera');
var btnB = document.querySelector('.emitterb');


var oA = Rx.Observable.fromEvent(btnA, 'click').map(x => 1).scan((acc,v) => acc + v);
var oB = Rx.Observable.fromEvent(btnB, 'click').map(x => 1).scan((acc,v) => acc + v);
var combo = Rx.Observable.combineAll(oA,oB);
combo.flatMap(v => v).subscribe((v) => {
	write(v);
});