Test 3 Observables

by Mario_Rivis

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>

<input id="my-input" type="number">

<select id="select-box">
  <option selected hidden> -- select a resource -- </option>
  <option value="posts">posts</option>
  <option value="albums">albums</option>
  <option value="todos">todos</option>
</select>

JavaScript

/* 
 * You have an input field: my-input, which is of type number and a select item called select-box. 
 * The number represents the id of the user you want to get (a number between 1 and 10) resources for 
 * The select tells us which resource you want to get for the specified user
 *
 * For more details visit https://jsonplaceholder.typicode.com/
 * Response example: https://jsonplaceholder.typicode.com/todos?userId=4 will give all todos for user with id 4
 * Response example: https://jsonplaceholder.typicode.com/albums?userId=9 will give all albums for user with id 9
 * Response example: https://jsonplaceholder.typicode.com/posts?userId=1 will give all todos for user with id 1
 * 
 * When either one of the input changes, create an http request to get the requsted resource for the specified user
 * 
 * HINT: you should map both observables to event -> event.target.value to get the value from the events
*/

const myInput = document.getElementById('my-input');
const selectBox = document.querySelector('#select-box');

const photoId$ = Rx.Observable.fromEvent(myInput, 'input') //...
const resource$ = Rx.Observable.fromEvent(selectBox, 'change') //...

const subscription = Rx.Observable.combineLatest(photoId$, resource$)
//...
    .subscribe(
       jsonRes => console.log(jsonRes),
       err => console.log(err),
       complete => console.log('complete'));