From 197aa1256eedf06065948cb1135d27e247cf1d7b Mon Sep 17 00:00:00 2001
From: David <davidaster007@gmail.com>
Date: Fri, 11 Nov 2022 14:23:17 +0100
Subject: [PATCH] =?UTF-8?q?hinzugef=C3=BCgt=20Promise=20Interface=20als=20?=
 =?UTF-8?q?AJAX=20Aufruf,ajax=20callback=20hell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chapter16/PromiseAsAjaxCall.js            | 43 +++++++++++++++++++
 .../chapter16/{ajaxCall.js => ajaxCalls.js}   |  2 +-
 .../chapter16/callbackHell.js                 | 27 ++++++++++++
 .../Javascript Expert/chapter16/index.html    |  2 +-
 4 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 javascript/Javascript Expert/chapter16/PromiseAsAjaxCall.js
 rename javascript/Javascript Expert/chapter16/{ajaxCall.js => ajaxCalls.js} (97%)
 create mode 100644 javascript/Javascript Expert/chapter16/callbackHell.js

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 = `
+    <article class="country">
+      <img class="country__img" src="${data.flags.png}" />
+      <div class="country__data">
+        <h3 class="country__name">${data.name.common}</h3>
+        <h4 class="country__region">${data.region}</h4>
+        <p class="country__row"><span>👫</span>${(
+          +data.population / 1000000
+        ).toFixed(1)} Mil</p>
+  
+      </div>
+    </article>
+  `;
+  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 @@
       <div class="countries"></div>
       <div class="images"></div>
     </main>
-    <script src="ajaxCall.js"></script>
+    <script src="PromiseAsAjaxCall.js"></script>
   </body>
 </html>