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"}]
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>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>