learnjavascript/task2.html at main · dicksonchellakon/learnjavascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
   <head>
       <title>List of Users</title>
   </head>
   <body>

     <table></table>

     <script>
      /**
          * List the Users from the below API
          * https://jsonplaceholder.typicode.com/users
          */
         let userData = []

         //Get the list of Users from API
         let fetchUsers = async () => {
             let fetchUserResponse = await fetch('https://jsonplaceholder.typicode.com/users')

             if(!fetchUserResponse.ok) return

             return await fetchUserResponse.json();
         }

         //Generate the HTML Table Head
        function generateTableHead(table, data) {
          let thead = table.createTHead();
          let row = thead.insertRow();
          for (let key of data) {
            let th = document.createElement("th");
            let text = document.createTextNode(key);
            th.appendChild(text);
            row.appendChild(th);
          }
        }

        //Generate the HTML Table Rows
        function generateTable(table, data) {
          data.forEach(user => {
            let row = table.insertRow();
            for (key in user) {
              let cell = row.insertCell();
              let text = document.createTextNode(user[key]);
              cell.appendChild(text);
            }
          });
        }

        /**
         * Functionality to call a API to get the Users lit
         * Generate a HTML Table to render it.
        */
       fetchUsers()
         .then(users => {
           console.log(users)
           let table = document.querySelector("table");
           let data = Object.keys(users[0]);
           generateTable(table, users); // generate the table
           generateTableHead(table, data); // then the head

        })
     </script>

   </body>
</html>