2026-07-08 11:55:05 +02:00
parent cc3dc382ed
commit 199d580016
247 changed files with 38615 additions and 13 deletions
--- a/02_advanced/uebungen/u23_fetch-users/index.html
+++ b/02_advanced/uebungen/u23_fetch-users/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
  <head>
    <meta charset="UTF-8" />
@@ -21,10 +21,48 @@
            <a href="https://dummyjson.com/users">https://dummyjson.com/users</a> für den Fetch-Aufruf.
          </p>
        </div>
+        <div class="output alert alert-secondary my-3"></div>
      </div>
    </main>
    <script>
      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const fetchUsers = async () => {
+        try {
+          // Fetch-aufruf an die API
+          const response = await fetch('https://dummyjson.com/users');
+
+          // Prüfen ob die OK ist
+          if (!response.ok) {
+            throw new Error(`HTTP-Fehler: ${response.status}`);
+          }
+
+          // JSON-Daten parsen
+          const data = await response.json();
+
+          return data;
+
+          return data;
+        } catch (error) {
+          console.error(error.message);
+        }
+      };
+
+      // Funktionsaufruf
+      fetchUsers().then((data) => {
+        console.log(data);
+        console.log(data.users.length);
+
+        outputEl.innerHTML = '';
+        data.users.forEach((user) => {
+          const { firstName, lastName, email } = user;
+
+          console.log(`${firstName} ${lastName} (${email})`);
+          outputEl.innerHTML += `${firstName} ${lastName} (${email})<br />`;
+        });
+      });
    </script>
  </body>
 </html>