How to fetch api data and view in HTML table

Question

In my code, I want to fetch data from api and view in html table using javascript.

fetch("http://dummy.restapiexample.com/api/v1/employees").then(
  res => {
    res.json().then(
      data => {
        console.log(data);
        if (data.length > 0) {

          var temp = "";
          data.forEach((itemData) => {
            temp += "<tr>";
            temp += "<td>" + itemData.id + "</td>";
            temp += "<td>" + itemData.employee_name + "</td>";
            temp += "<td>" + itemData.employee_salary + "</td>";
          });
          document.getElementById('data').innerHTML = temp;
        }
      }
    )
  }
)

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Employee Name</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody id="data">

    </tbody>
  </table>
</div>

The api data can view but when I want to view those data to html table is shows nothing. any idea how I show those fetched data into the html table.

Md Sabbir Alam · Accepted Answer · 2020-10-21 07:11:36Z

You have been using the data object. But if you inspect the console your array is inside data.data. So you need to use data.data to iterate over the array.

fetch("http://dummy.restapiexample.com/api/v1/employees").then(
  res => {
    res.json().then(
      data => {
        console.log(data.data);
        if (data.data.length > 0) {

          var temp = "";
          data.data.forEach((itemData) => {
            temp += "<tr>";
            temp += "<td>" + itemData.id + "</td>";
            temp += "<td>" + itemData.employee_name + "</td>";
            temp += "<td>" + itemData.employee_salary + "</td></tr>";
          });
          document.getElementById('data').innerHTML = temp;
        }
      }
    )
  }
)

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Employee Name</th>
        <th>Salary</th>
      </tr>
    </thead>
    <tbody id="data">

    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

How to fetch api data and view in HTML table

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related