RxJS - Zip

RxJS -Zip

by ayyanarj

HTML

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

<input type="text" id="text1" value="" placeholder="Observable 1 Value" />
<input type="button" id="button1" value="Emit Obs 1" />
<br><br>

<input type="text" id="text2" value="" placeholder="Observable 2 Value"/>
<input type="button" id="button2" value="Emit Obs 2" />


<p>
<span></span>
</p>

JavaScript

// import { merge, fromEvent, interval } from 'rxjs';

var span = document.querySelector('span');

var text1 = document.querySelector('#text1');
var text2 = document.querySelector('#text2');

var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
 
const but1Obs = Rx.Observable.fromEvent(button1, 'click');
const but2Obs = Rx.Observable.fromEvent(button2, 'click');

var sub1 = new Rx.Subject();
var sub2 = new Rx.Subject();

but1Obs.subscribe((data) => {
 sub1.next(text1.value);
});

but2Obs.subscribe((data) => {
 sub2.next(text2.value);
});


const combined = Rx.Observable.zip(sub1, sub2);

combined.subscribe(([text1Value, text2Value]) => {
  console.log(`Text 1 Value : `, text1Value);
  console.log(`Text 2 Value : `, text2Value);
  span.textContent = `Text 1 Value : `+ text1Value + `, Text 2 Value : `+ text2Value;
});