diff --git a/javascript/Javascript Expert/chapter16/PromiseAsAjaxCall.js b/javascript/Javascript Expert/chapter16/PromiseAsAjaxCall.js new file mode 100644 index 0000000..67ce78f --- /dev/null +++ b/javascript/Javascript Expert/chapter16/PromiseAsAjaxCall.js @@ -0,0 +1,43 @@ +const countryContainer = document.querySelector(".countries"); +const request = fetch("https://restcountries.com/v3.1/name/slovenia"); +console.log(request); + +function renderCountry(data) { + const html = ` +
+ +
+

${data.name.common}

+

${data.region}

+

👫${( + +data.population / 1000000 + ).toFixed(1)} Mil

+ +
+
+ `; + countryContainer.innerHTML += html; +} +// man kann einen ajax Aufruf Mithilfe Promise Datastruktur ausgeführt werden +const countryData = function (country) { + fetch(`https://restcountries.com/v3.1/name/${country}`) // die Metzhode fetch gibt Promise DS zurück + .then(response => { + console.log(response); + return response.json(); // die Methode gibt pending Promise zurück, und wenn die Daten erfolreich erhaltet werden, + // wird ein Promise mit json Daten zurück gegeben + }) + .then(data => { + // die zweite Methode then() behandelt dann ein JSON, in unserem Fall bekommt man schon geparsed JSON Data + console.log(data[0]); + renderCountry(data[0]); + const neighbour = data[0].borders[0]; + if (!neighbour) return; + return fetch(`https://restcountries.com/v3.1/alpha/${neighbour}`); + }) + .then(response => { + response.json(); + }) + .then(data => renderCountry(data, "neighbour")); +}; + +countryData("germany"); diff --git a/javascript/Javascript Expert/chapter16/ajaxCall.js b/javascript/Javascript Expert/chapter16/ajaxCalls.js similarity index 97% rename from javascript/Javascript Expert/chapter16/ajaxCall.js rename to javascript/Javascript Expert/chapter16/ajaxCalls.js index cdf8b98..f3b76cb 100644 --- a/javascript/Javascript Expert/chapter16/ajaxCall.js +++ b/javascript/Javascript Expert/chapter16/ajaxCalls.js @@ -28,7 +28,7 @@ function getCountryData(country) { request.addEventListener("load", function () { const [data] = JSON.parse(this.responseText); console.log(data); - renderCountry(data); + renderCountry(data[0]); }); } getCountryData("austria"); diff --git a/javascript/Javascript Expert/chapter16/callbackHell.js b/javascript/Javascript Expert/chapter16/callbackHell.js new file mode 100644 index 0000000..ff0aa92 --- /dev/null +++ b/javascript/Javascript Expert/chapter16/callbackHell.js @@ -0,0 +1,27 @@ +setTimeout(() => { + console.log("1 second"); + setTimeout(() => { + console.log("2 second"); + setTimeout(() => { + console.log("3 second"); + setTimeout(() => { + console.log("4 second"); + setTimeout(() => { + console.log("5 second"); + setTimeout(() => { + console.log("6 second"); + setTimeout(() => { + console.log("7 second"); + setTimeout(() => { + console.log("8 second"); + setTimeout(() => { + console.log("9 second"); + }, 1000); + }, 1000); + }, 1000); + }, 1000); + }, 1000); + }, 1000); + }, 1000); + }, 1000); +}, 1000); diff --git a/javascript/Javascript Expert/chapter16/index.html b/javascript/Javascript Expert/chapter16/index.html index 5723aba..2d0913c 100644 --- a/javascript/Javascript Expert/chapter16/index.html +++ b/javascript/Javascript Expert/chapter16/index.html @@ -11,6 +11,6 @@
- +