Javascript Fetch API to Make HTTP Request to JSONPlaceholder API and Display it inside Table in Browser

Source Code

index.html

<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>

<table>

<thead>

<tr>

<th>Username</th>

<th>Email</th>

</tr>

</thead>

</tbody>

</table>

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.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