RxJS - MergeMap

RxJS - MergeMap

by ayyanarj

HTML

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

<input type="text" id="text1">
<input type="text" id="text2">

<p>
Combined Value: 
<span></span>
</p>

JavaScript

var span = document.querySelector("span");
var input1 = document.querySelector("#text1");
var input2 = document.querySelector("#text2");

var obs1 = Rx.Observable.fromEvent(input1, 'input');
var obs2 = Rx.Observable.fromEvent(input2, 'input');

/*
obs1.subscribe(event1 => span.textContent = event1.target.value);
obs2.subscribe(event2 => {
	span.textContent = event2.target.value
});
*/

obs1.mergeMap(
	event1 => {
  	return obs2.map(event2 => event1.target.value + '-' + event2.target.value)
  }
).subscribe(val => {
	span.textContent = val;
});