peduarte/_readme.md

## _readme.md

      
    Raw
  

              _readme.md
            
          
    RxJs Observable – Get Shits from Shit Pedro Says
https://esnextb.in/?gist=11d6d8e9c0a0b4a9101bb91bacc1b898

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <input type="text" id="search" placeholder="Search for a shit" autocomplete="off" />
  <div id="shits"></div>
</body>
</html>

## index.js
import { Observable } from 'rxjs';


function getShits$(keyword) {
  return Observable
    .fromPromise(
      fetch('https://shitpedrosays.herokuapp.com/shits.json')
        .then(response => response.json())
    )
    .map(data => data.shits.filter(shit => shit.content.toLowerCase().includes(keyword)));
}

const searchInput = document.getElementById('search');
const shitsHolder = document.getElementById('shits');

Observable.fromEvent(searchInput, 'keyup')
  .map(event => event.target.value)
  .distinctUntilChanged()
  .do(x => console.log(x))
  .filter(value => value.length > 2)
  .debounceTime(300)
  .concatMap(value => getShits$(value))
  .subscribe(data => {
    shitsHolder.innerHTML = `
      <ul>
        ${data.map(shit => `<li>${shit.content}</li>`).join('')}
      </ul>
    `;
  });

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "rxjs": "5.0.0-rc.1"
  }
}

## transpiled.js
'use strict';

var _rxjs = require('rxjs');

function getShits$(keyword) {
  return _rxjs.Observable.fromPromise(fetch('https://shitpedrosays.herokuapp.com/shits.json').then(function (response) {
    return response.json();
  })).map(function (data) {
    return data.shits.filter(function (shit) {
      return shit.content.toLowerCase().includes(keyword);
    });
  });
}

var searchInput = document.getElementById('search');
var shitsHolder = document.getElementById('shits');

_rxjs.Observable.fromEvent(searchInput, 'keyup').map(function (event) {
  return event.target.value;
}).distinctUntilChanged().do(function (x) {
  return console.log(x);
}).filter(function (value) {
  return value.length > 2;
}).debounceTime(300).concatMap(function (value) {
  return getShits$(value);
}).subscribe(function (data) {
  shitsHolder.innerHTML = '\n      <ul>\n        ' + data.map(function (shit) {
    return '<li>' + shit.content + '</li>';
  }).join('') + '\n      </ul>\n    ';
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<input type="text" id="search" placeholder="Search for a shit" autocomplete="off" />
	<div id="shits"></div>
	</body>
	</html>
	import { Observable } from 'rxjs';


	function getShits$(keyword) {
	return Observable
	.fromPromise(
	fetch('https://shitpedrosays.herokuapp.com/shits.json')
	.then(response => response.json())
	)
	.map(data => data.shits.filter(shit => shit.content.toLowerCase().includes(keyword)));
	}

	const searchInput = document.getElementById('search');
	const shitsHolder = document.getElementById('shits');

	Observable.fromEvent(searchInput, 'keyup')
	.map(event => event.target.value)
	.distinctUntilChanged()
	.do(x => console.log(x))
	.filter(value => value.length > 2)
	.debounceTime(300)
	.concatMap(value => getShits$(value))
	.subscribe(data => {
	shitsHolder.innerHTML = `
	<ul>
	${data.map(shit => `<li>${shit.content}</li>`).join('')}
	</ul>
	`;
	});
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"rxjs": "5.0.0-rc.1"
	}
	}
	'use strict';

	var _rxjs = require('rxjs');

	function getShits$(keyword) {
	return _rxjs.Observable.fromPromise(fetch('https://shitpedrosays.herokuapp.com/shits.json').then(function (response) {
	return response.json();
	})).map(function (data) {
	return data.shits.filter(function (shit) {
	return shit.content.toLowerCase().includes(keyword);
	});
	});
	}

	var searchInput = document.getElementById('search');
	var shitsHolder = document.getElementById('shits');

	_rxjs.Observable.fromEvent(searchInput, 'keyup').map(function (event) {
	return event.target.value;
	}).distinctUntilChanged().do(function (x) {
	return console.log(x);
	}).filter(function (value) {
	return value.length > 2;
	}).debounceTime(300).concatMap(function (value) {
	return getShits$(value);
	}).subscribe(function (data) {
	shitsHolder.innerHTML = '\n <ul>\n ' + data.map(function (shit) {
	return '<li>' + shit.content + '</li>';
	}).join('') + '\n </ul>\n ';
	});