JSON application folder added

JSON application using fetch api functionality and async, await concept to show list of GITHUB users generated on the DOM.
gdscmuet · Oct 21, 2021 · 9a85999 · 9a85999
1 parent 2e6cc16
commit 9a85999
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/JSON application/README.md b/JSON application/README.md
@@ -0,0 +1 @@
+## JSON application using fetch api functionality and async, await concept to show ist of GITHUB users generated on the DOM.
diff --git a/JSON application/index.html b/JSON application/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSON application</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+</head>
+<body>
+    <div class="container">
+    <h2 class="mt-4">Fetching GIT usernames via an API using JSON</h2>
+
+    <button type="button" class="mt-4 btn btn-primary">Fetch GIT users</button><p>
+
+    <ul id="list" class="mt-2" >
+        <!-- <li></li> -->
+    </ul>
+    </div>
+
+
+
+    <script>
+        let fetchBtn = document.addEventListener('click', fetchHandler)
+        let list = document.getElementById('list')
+        function fetchHandler(){
+
+             //Using async function to fetch github users api
+             async function fetchUsers(){
+             let url = "https://api.github.com/users"
+             const resp= await fetch(url);
+             const users = await resp.json(); //convertng the resp into object via JSON
+            //  console.log(users)
+
+
+            let html=""
+            //Iterating through each array and printing the "login" on the DOM.
+
+             users.forEach(element => {
+                 html+=`  <li>${element.login}</li>`
+
+             });
+             //appending the final html into our list i.e. <ul> element 
+
+               list.innerHTML=html;
+
+
+         }
+
+
+
+
+
+
+        fetchUsers();//calling fetch users
+       }
+
+
+
+    </script>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		## JSON application using fetch api functionality and async, await concept to show ist of GITHUB users generated on the DOM.