Source Code
index.html
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 |
<table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Username</th> <th>Email</th> </tr> </thead> <tbody id="users-table-body"> <!-- Users will be added here --> </tbody> </table> <script> async function getUsers() { try { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const users = await response.json(); const tableBody = document.getElementById('users-table-body'); users.forEach(user => { const row = ` <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.username}</td> <td>${user.email}</td> </tr> `; tableBody.innerHTML += row; }); } catch (error) { console.error(error); } } getUsers(); </script> |
As you can see we are making a simple
http get request to the jsonplaceholder
api and fetching the details
of the user such as the name,email and id and displaying it inside the table
using dynamic javascript as shown below