Skip to content

Instantly share code, notes, and snippets.

@TimCodes

TimCodes/index.html

Last active May 13, 2017 00:16
Show Gist options
  • Save TimCodes/81346c990b6c49eb6eaab62ea65dbdeb to your computer and use it in GitHub Desktop.
Save TimCodes/81346c990b6c49eb6eaab62ea65dbdeb to your computer and use it in GitHub Desktop.
Download ZIP
Moving window Rxjs example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>RxJS 5 Operators</title>
<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
</head>
<body>
<script id="jsbin-javascript">
"use strict";
var subject = new Rx.Subject();
// initilize window with values
var slidingWindow = Rx.Observable.fromPromise(axios.get('http://jsonplaceholder.typicode.com/posts'))
.map(function (response) { return response.data.slice(0, 2); })
.switchMap(function (d) { return subject.startWith(d); })
.scan(function (acc, curr) {
acc.shift();
acc.push(curr);
return acc;
});
// push new values to window
var timerPush = Rx.Observable.interval(2000)
.map(function (d) { return axios.get("http://jsonplaceholder.typicode.com/posts/" + (Math.floor(Math.random() * (20 - 1 + 1)) + 1)); })
.flatMap(function (d) { return d; })
.map(function (d) { return d.data; })
.map(function (d) { return subject.next(d); });
timerPush.subscribe();
var subscribe = slidingWindow.subscribe(function (val) { return console.log(val); });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsSUFBSSxPQUFPLEdBQUcsSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7QUFFL0IsK0JBQStCO0FBQy9CLElBQU0sYUFBYSxHQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsMkNBQTJDLENBQUMsQ0FBQztLQUN2RixHQUFHLENBQUMsVUFBVSxRQUFRLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztLQUM5RCxTQUFTLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFwQixDQUFvQixDQUFDO0tBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxJQUFJO0lBQ3ZCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNaLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDZixNQUFNLENBQUMsR0FBRyxDQUFDO0FBQ2pCLENBQUMsQ0FBQyxDQUFBO0FBRVosNEJBQTRCO0FBQzVCLElBQU0sU0FBUyxHQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztLQUM1QixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUcsT0FBQSxLQUFLLENBQUMsR0FBRyxDQUFDLGdEQUE2QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxDQUFDLEVBQUUsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUUsQ0FBQyxFQUF0RyxDQUFzRyxDQUFFO0tBQ2hILE9BQU8sQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLENBQUMsRUFBRCxDQUFDLENBQUM7S0FDZixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsSUFBSSxFQUFOLENBQU0sQ0FBQztLQUNoQixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUssT0FBQSxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFmLENBQWUsQ0FBQyxDQUFBO0FBRWxELFNBQVMsQ0FBQyxTQUFTLEVBQUUsQ0FBQTtBQUNyQixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFDLFVBQUEsR0FBRyxJQUFJLE9BQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBaEIsQ0FBZ0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsidmFyIHN1YmplY3QgPSBuZXcgUnguU3ViamVjdCgpO1xuXG4vLyBpbml0aWxpemUgd2luZG93IHdpdGggdmFsdWVzXG5jb25zdCBzbGlkaW5nV2luZG93ID1SeC5PYnNlcnZhYmxlLmZyb21Qcm9taXNlKGF4aW9zLmdldCgnaHR0cDovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vcG9zdHMnKSlcbiAgICAgICAgICAgICAgLm1hcChmdW5jdGlvbiAocmVzcG9uc2UpIHsgcmV0dXJuIHJlc3BvbnNlLmRhdGEuc2xpY2UoMCwgMik7IH0pXG4gICAgICAgICAgICAgIC5zd2l0Y2hNYXAoZCA9PiBzdWJqZWN0LnN0YXJ0V2l0aChkKSlcbiAgICAgICAgICAgICAgLnNjYW4oZnVuY3Rpb24gKGFjYywgY3Vycikge1xuICAgICAgICAgICAgICAgIGFjYy5zaGlmdCgpO1xuICAgICAgICAgICAgICAgIGFjYy5wdXNoKGN1cnIpO1xuICAgICAgICAgICAgICAgIHJldHVybiBhY2M7XG4gICAgICAgICAgfSlcblxuLy8gcHVzaCBuZXcgdmFsdWVzIHRvIHdpbmRvd1xuY29uc3QgdGltZXJQdXNoID0gICAgICAgUnguT2JzZXJ2YWJsZS5pbnRlcnZhbCgyMDAwKVxuICAgICAgICAgICAgICAgICAgICAgICAubWFwKGQ9PiBheGlvcy5nZXQoYGh0dHA6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3Bvc3RzLyR7TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogKDIwIC0gMSArIDEpKSArIDF9YCkgKVxuICAgICAgICAgICAgICAgICAgICAgICAuZmxhdE1hcChkID0+IGQpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiBkLmRhdGEpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiAgc3ViamVjdC5uZXh0KGQpKVxuXG50aW1lclB1c2guc3Vic2NyaWJlKClcbmNvbnN0IHN1YnNjcmliZSA9IHNsaWRpbmdXaW5kb3cuc3Vic2NyaWJlKHZhbCA9PiBjb25zb2xlLmxvZyh2YWwpKTsiXX0=
</script>
<script id="jsbin-source-javascript" type="text/javascript">var subject = new Rx.Subject();
// initilize window with values
const slidingWindow =Rx.Observable.fromPromise(axios.get('http://jsonplaceholder.typicode.com/posts'))
.map(function (response) { return response.data.slice(0, 2); })
.switchMap(d => subject.startWith(d))
.scan(function (acc, curr) {
acc.shift();
acc.push(curr);
return acc;
})
// push new values to window
const timerPush = Rx.Observable.interval(2000)
.map(d=> axios.get(`http://jsonplaceholder.typicode.com/posts/${Math.floor(Math.random() * (20 - 1 + 1)) + 1}`) )
.flatMap(d => d)
.map(d => d.data)
.map(d => subject.next(d))
timerPush.subscribe()
const subscribe = slidingWindow.subscribe(val => console.log(val));</script></body>
</html>
Raw
jsbin.lucaru.js
"use strict";
var subject = new Rx.Subject();
// initilize window with values
var slidingWindow = Rx.Observable.fromPromise(axios.get('http://jsonplaceholder.typicode.com/posts'))
.map(function (response) { return response.data.slice(0, 2); })
.switchMap(function (d) { return subject.startWith(d); })
.scan(function (acc, curr) {
acc.shift();
acc.push(curr);
return acc;
});
// push new values to window
var timerPush = Rx.Observable.interval(2000)
.map(function (d) { return axios.get("http://jsonplaceholder.typicode.com/posts/" + (Math.floor(Math.random() * (20 - 1 + 1)) + 1)); })
.flatMap(function (d) { return d; })
.map(function (d) { return d.data; })
.map(function (d) { return subject.next(d); });
timerPush.subscribe();
var subscribe = slidingWindow.subscribe(function (val) { return console.log(val); });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsSUFBSSxPQUFPLEdBQUcsSUFBSSxFQUFFLENBQUMsT0FBTyxFQUFFLENBQUM7QUFFL0IsK0JBQStCO0FBQy9CLElBQU0sYUFBYSxHQUFFLEVBQUUsQ0FBQyxVQUFVLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsMkNBQTJDLENBQUMsQ0FBQztLQUN2RixHQUFHLENBQUMsVUFBVSxRQUFRLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztLQUM5RCxTQUFTLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFwQixDQUFvQixDQUFDO0tBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsRUFBRSxJQUFJO0lBQ3ZCLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNaLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDZixNQUFNLENBQUMsR0FBRyxDQUFDO0FBQ2pCLENBQUMsQ0FBQyxDQUFBO0FBRVosNEJBQTRCO0FBQzVCLElBQU0sU0FBUyxHQUFTLEVBQUUsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztLQUM1QixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUcsT0FBQSxLQUFLLENBQUMsR0FBRyxDQUFDLGdEQUE2QyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxDQUFDLEVBQUUsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUUsQ0FBQyxFQUF0RyxDQUFzRyxDQUFFO0tBQ2hILE9BQU8sQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLENBQUMsRUFBRCxDQUFDLENBQUM7S0FDZixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxDQUFDLENBQUMsSUFBSSxFQUFOLENBQU0sQ0FBQztLQUNoQixHQUFHLENBQUMsVUFBQSxDQUFDLElBQUssT0FBQSxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFmLENBQWUsQ0FBQyxDQUFBO0FBRWxELFNBQVMsQ0FBQyxTQUFTLEVBQUUsQ0FBQTtBQUNyQixJQUFNLFNBQVMsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFDLFVBQUEsR0FBRyxJQUFJLE9BQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBaEIsQ0FBZ0IsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsidmFyIHN1YmplY3QgPSBuZXcgUnguU3ViamVjdCgpO1xuXG4vLyBpbml0aWxpemUgd2luZG93IHdpdGggdmFsdWVzXG5jb25zdCBzbGlkaW5nV2luZG93ID1SeC5PYnNlcnZhYmxlLmZyb21Qcm9taXNlKGF4aW9zLmdldCgnaHR0cDovL2pzb25wbGFjZWhvbGRlci50eXBpY29kZS5jb20vcG9zdHMnKSlcbiAgICAgICAgICAgICAgLm1hcChmdW5jdGlvbiAocmVzcG9uc2UpIHsgcmV0dXJuIHJlc3BvbnNlLmRhdGEuc2xpY2UoMCwgMik7IH0pXG4gICAgICAgICAgICAgIC5zd2l0Y2hNYXAoZCA9PiBzdWJqZWN0LnN0YXJ0V2l0aChkKSlcbiAgICAgICAgICAgICAgLnNjYW4oZnVuY3Rpb24gKGFjYywgY3Vycikge1xuICAgICAgICAgICAgICAgIGFjYy5zaGlmdCgpO1xuICAgICAgICAgICAgICAgIGFjYy5wdXNoKGN1cnIpO1xuICAgICAgICAgICAgICAgIHJldHVybiBhY2M7XG4gICAgICAgICAgfSlcblxuLy8gcHVzaCBuZXcgdmFsdWVzIHRvIHdpbmRvd1xuY29uc3QgdGltZXJQdXNoID0gICAgICAgUnguT2JzZXJ2YWJsZS5pbnRlcnZhbCgyMDAwKVxuICAgICAgICAgICAgICAgICAgICAgICAubWFwKGQ9PiBheGlvcy5nZXQoYGh0dHA6Ly9qc29ucGxhY2Vob2xkZXIudHlwaWNvZGUuY29tL3Bvc3RzLyR7TWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogKDIwIC0gMSArIDEpKSArIDF9YCkgKVxuICAgICAgICAgICAgICAgICAgICAgICAuZmxhdE1hcChkID0+IGQpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiBkLmRhdGEpXG4gICAgICAgICAgICAgICAgICAgICAgIC5tYXAoZCA9PiAgc3ViamVjdC5uZXh0KGQpKVxuXG50aW1lclB1c2guc3Vic2NyaWJlKClcbmNvbnN0IHN1YnNjcmliZSA9IHNsaWRpbmdXaW5kb3cuc3Vic2NyaWJlKHZhbCA9PiBjb25zb2xlLmxvZyh2YWwpKTsiXX0=
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment