Update samples

Author: rstropek

ModernJavaScriptWebApiClients/040-reactivex/index.ts

@@ -1,4 +1,6 @@
-import * as Rx from '@reactivex/rxjs';
+import * as Rx from 'rxjs';
+import 'rxjs/add/observable/dom/ajax';
+import { Observable } from 'rxjs/Observable';
 
 // The basics
 (function () {
@@ -91,4 +93,17 @@ import * as Rx from '@reactivex/rxjs';
         .merge(Rx.Observable.timer(1000, 10).map(v => 2).take(5))
         .debounceTime(100)
         .forEach(v => console.log(v));
+}); //();
+
+interface IPokemon {
+    url: string;
+    name: string;
+}
+
+(function () {
+    Rx.Observable.ajax('https://pokeapi.co/api/v2/pokemon/')
+        .map(e => e.response)
+        .flatMap(e => <IPokemon[]>e.results)
+        .map(e => e.name)
+        .forEach(e => console.log(e));
 })();

ModernJavaScriptWebApiClients/040-reactivex/package-lock.json

@@ -8,7 +8,7 @@
     "start": "webpack-dev-server"
   },
   "dependencies": {
-    "@reactivex/rxjs": "^5.5.2"
+    "rxjs": "^5.5.2"
   },
   "devDependencies": {
     "html-webpack-plugin": "^2.30.1",

ModernJavaScriptWebApiClients/040-reactivex/package.json

@@ -0,0 +1,20 @@
+const pokemonList = document.getElementById('pokemons');
+
+(function() {
+// Build XHR. Need details about XMLHttpRequest? Check
+// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+
+const xhr = new XMLHttpRequest();
+xhr.addEventListener('load', () => {
+  // Parse result
+  const jsonResult = JSON.parse(xhr.response);
+
+  // Iterate over result and print Pokemon results
+  jsonResult.results.forEach(pokemon => console.log(pokemon.name));
+});
+
+// Build URL
+xhr.open('GET', 'https://pokeapi.co/api/v2/pokemon/');
+xhr.send();
+
+})();

ModernJavaScriptWebApiClients/050-js-rest-client/app-xhr.js

@@ -11,7 +11,7 @@ <h1>Pokemons</h1>
     <ul id="pokemons"></ul>
 
     <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
-    <script src="app-fetch-await.js"></script>
+    <script src="app-xhr.js"></script>
 </body>
 
 </html>