<input type="number" min="1" max="10" step="1" placeholder="ID">
<select>
  <option selected hidden> -- select an option -- </option>
  <option value="posts">posts</option>
  <option value="albums">albums</option>
  <option value="todos">todos</option>
</select>

<output></output>
const input = document.querySelector("input");
const select = document.querySelector("select");
const output = document.querySelector("output");

const id$ = Rx.Observable
  .fromEvent(input, "input")
  .map(e => e.target.value);

const resource$ = Rx.Observable
  .fromEvent(select, "change")
  .map(e => e.target.value);

Rx.Observable
  .combineLatest(id$, resource$)
  .switchMap(getResources)
  .subscribe(render);

function getResources([id, resource]) {
  return Rx.Observable.ajax(
    `https://jsonplaceholder.typicode.com/${resource}?userId=${id}`
  );
}

function render(res) {
  output.innerHTML = "";
  const articles = document.createDocumentFragment();
  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;
    article.appendChild(h1);
    p.textContent = post.body;
    article.appendChild(p);
    articles.appendChild(article);
  }
  output.appendChild(articles);
}

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