<button>Show posts</button>
<output></output>
const output = document.querySelector("output");
const button = document.querySelector("button");

Rx.Observable
  .fromEvent(button, "click")
  .flatMap(getAlbums)
  .subscribe(render, err => console.error(err));

function getAlbums() {
  const userId = Math.round(Math.random() * 10);
  return Rx.Observable.ajax(
    `https://jsonplaceholder.typicode.com/albums?userId=${userId}`
  );
}







function render(res) {
  output.innerHTML = "";
  for (const post of res.response) {
    const article = document.createElement("article");
    const h1 = document.createElement("h1");
    const p = document.createElement("p");
    h1.textContent = post.title;
    p.textContent = `id:${post.id} userId: ${post.userId}`;
    article.appendChild(h1);
    article.appendChild(p);
    output.appendChild(article);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js