How to create a HTML table from an array?

Question

I would like to create a table with the information from an array. I have created a table, however I am unable to pass the array into the table. I would like it to create a table automatically from the array.

<table class="col-3 table tableforContact" id="contactinformation">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

This is how I define my array:

const responses = JSON.parse(user.Contacts)

Finally, this is the content in the array:

[{"ContactName": "45551134", "ContactNumber": "95011225"}]

Seems like https://stackoverflow.com/questions/1078118/how-do-i-iterate-over-a-json-structure might be a good starting place — user3783243, Jan 20 '22 at 15:58

score 0 · Answer 1 · answered Jan 20 '22 at 16:07

You can iterate through data array and append each object to a row:

const data = [{"ContactName": "45551134", "ContactNumber": "95011225"}];

const table = document.querySelector("#contactinformation");
const headers = table.querySelector("thead tr");
const body = table.querySelector("tbody");
                    
// Create headers
for (const key in data[0]) {
  const header = document.createElement("th");
  header.innerText = key;
  headers.append(header);
}

// Create tbody rows
data.forEach(obj => {
  // Create row
  const row = document.createElement("tr");
  body.append(row);
  
  // Create row element
  for (const key in obj) {
    const value = document.createElement("td");
    value.innerText = obj[key];
    row.append(value);
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<table class="col-3 table tableforContact" id="contactinformation">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

score 0 · Answer 2 · answered Jan 20 '22 at 16:16

is it okay to use jQuery? if yes, you can use $.each function.

const array = [{"ContactName": "45551134", "ContactNumber": "95011225"}]

$.each(array, function(index){
   $("#contact-name").html(this.ContactName)
   $("#contact-number").html(this.ContactNumber)
});

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

<table class="col-3 table tableforContact" id="contactinformation">
  <thead>
    <tr>
      <td>Contact Name</td>
      <td>Contact Number</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="contact-name"></td>
      <td id="contact-number"></td>
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to create a HTML table from an array?

2 Answers2