CODEWITHSUNDEEP
javascripthtml
anguler-developer
anguler-developer

Reputation: 61

How to render a table using javascript with foreach loop

I have a table whose tr needs to be repeat by rendering the value inside td. The values of td comes from get api call using foreach loop. I have already tried to render but my tbody is not coming inside the table. I want it to create using only javascript, no jquery.Here is the code below

var container = document.getElementById("container");
var url = "http://dummy.restapiexample.com/api/v1/employees";
fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  container.innerHTML = '<div class="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><table class="table"><thead><tr><th>ID</th><th>Firstname</th></tr></thead>'
  data.data.forEach(function(count) {
    console.log(count);
    container.innerHTML += '<tbody><tr><td>' + count.id + '</td><td>' + count.employee_name + '</td></tr></tbody>';
  })
}).catch(function() {
  console.log("Booo");
});
container.innerHTML = '</table></div>'
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div id="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
</div>

Upvotes: 1

Views: 4756

Answers (2)

Kashif Sulehria
Kashif Sulehria

Reputation: 77

    
const root = document.getElementById("root");
const data = [{id:1, name:'kashif'}];
    
data.forEach((e) => {
  root.innerHTML += `<td> ${e.id} </td><td> ${e.name} </td>`;
      
});
<table>
<thead>
<td>id</td><td>name</td>
</thead>
<tbody id="root"></tbody>
</table>

Upvotes: 0

Fahad Tahir
Fahad Tahir

Reputation: 112

Make a table and tbody since start and insert rows with forEach

var container = document.getElementById("container");
var url = "http://dummy.restapiexample.com/api/v1/employees";
fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  data.data.forEach(function(count) {
    console.log(count);
    let tableBody = document.getElementById("tableBody");
    tableBody.innerHTML += '<tr><td>' + count.id + '</td><td>' + count.employee_name + '</td></tr>';
  })
}).catch(function() {
  console.log("Booo");
});
container.innerHTML = '</table></div>'
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="container">
    <h2>Basic Table</h2>
    <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
    <table class="table">
       <thead>
         <tr>
          <th>ID</th><th>Firstname</th>
         </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>
  </div>

Upvotes: 1

Related Questions