RxJS + fetch data + update UI// source http://jsbin.com/venijo

index.html

<style id="jsbin-css">
tr {
  border-bottom: 1px solid black;
}
</style>
<meta name="description" content="RxJS + fetch data + update UI">
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script><h1>Hello, Rx.js!</h1>
<table>
  <thead>
    <tr>
      <td>
        <b>Emails</b>
      </td>
    </tr>
  </thead>
  <tbody id="email-table-body">
  </tbody>
</table>
<script id="jsbin-javascript">
"use strict";

// Helper Method
var ENDPOINT = 'users',
    ROOT = 'https://jsonplaceholder.typicode.com';

var makeRequest = function makeRequest(path, item) {
  return new Promise(function (resolve, reject) {
    // Assumes jQuery
    path ? path = '/' + path : path = '/';
    item ? item = '/' + item : item = '/';
    var url = ROOT + path + item;

    fetch(url).then(function (response) {
      //debugger;
      return response.json();
    }).then(function (data) {
      //debugger;
      resolve(data);
    })['catch'](function () {
      reject();
    });
  });
};

// BOILERPLATE
var PROMISE = makeRequest(ENDPOINT),
    source = Rx.Observable.fromPromise(PROMISE).flatMap(Rx.Observable.from);

source.map(function (user) {
  return user.website;
}).subscribe(function (value) {
  var row = document.createElement('tr');
  row.innerHTML = value;
  //debugger;
  document.querySelector('#email-table-body').innerHTML = document.querySelector('#email-table-body').innerHTML += row.outerHTML;
  console.log(value);
});
</script>

<script id="jsbin-source-css" type="text/css">tr {
  border-bottom: 1px solid black;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">"use strict";

// Helper Method
const ENDPOINT = 'users',
    ROOT     = 'https://jsonplaceholder.typicode.com';

const makeRequest =  (path, item) => {
return new Promise(function(resolve, reject) {
  // Assumes jQuery
  path ? (path = '/' + path) : path = '/';
  item ? (item = '/' + item) : item = '/';
  const url = ROOT + path + item;
  
  fetch(url)
    .then((response) => {
      //debugger;
      return response.json();
    })
    .then((data) => {
      //debugger;
      resolve(data);
    })
    .catch(function () {
      reject();
    })
});
};

// BOILERPLATE
const PROMISE = makeRequest(ENDPOINT),
    source =
  Rx.Observable.fromPromise(PROMISE)
  .flatMap(Rx.Observable.from);

source.
  map((user) => user.website).
  subscribe(value => {
    const row = document.createElement('tr');
    row.innerHTML = value;
     //debugger;
    document.querySelector('#email-table-body').innerHTML = document.querySelector('#email-table-body').innerHTML += row.outerHTML
    console.log(value);
  })</script>

jsbin.venijo.css

tr {
  border-bottom: 1px solid black;
}

jsbin.venijo.js

"use strict";

// Helper Method
var ENDPOINT = 'users',
    ROOT = 'https://jsonplaceholder.typicode.com';

var makeRequest = function makeRequest(path, item) {
  return new Promise(function (resolve, reject) {
    // Assumes jQuery
    path ? path = '/' + path : path = '/';
    item ? item = '/' + item : item = '/';
    var url = ROOT + path + item;

    fetch(url).then(function (response) {
      //debugger;
      return response.json();
    }).then(function (data) {
      //debugger;
      resolve(data);
    })['catch'](function () {
      reject();
    });
  });
};

// BOILERPLATE
var PROMISE = makeRequest(ENDPOINT),
    source = Rx.Observable.fromPromise(PROMISE).flatMap(Rx.Observable.from);

source.map(function (user) {
  return user.website;
}).subscribe(function (value) {
  var row = document.createElement('tr');
  row.innerHTML = value;
  //debugger;
  document.querySelector('#email-table-body').innerHTML = document.querySelector('#email-table-body').innerHTML += row.outerHTML;
  console.log(value);
});