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 @@
-
+