I am trying to fill HTML table with JavaScript function. I have a html element where I created the table and I will get data from backend endpoint that's why i am trying to add the date dynamical.
<script>
const items = [
{item: "Americano", quantity: 1, total: "12.52 sar" },
{item: "Frape", quantity: 3, total: "13.40 sar" },
{item: "Espresso", quantity: 2, total: "10.12 sar" },
];
for (let i = 0; i < items.length; i++) {
let item = document.getElementById("item");
let quantity = document.getElementById("quantity");
let total = document.getElementById("total");
}
</script>
<table id="table">
<tr>
<th >Item</th>
<th>Quantity</th>
<th >Total</th>
</tr>
<tr>
<td id="item"></td>
<td id="quantity"></td>
<td id="total"></td>
</tr>
</table>
You can add new rows to innerHTML:
const items = [
{ item: "Americano", quantity: 1, total: "12.52 sar" },
{ item: "Frape", quantity: 3, total: "13.40 sar" },
{ item: "Espresso", quantity: 2, total: "10.12 sar" }
];
for (var i = 0; i < items.length; i++) {
document.getElementsByTagName("table")[0].innerHTML+= "<tr><td>"+items[i].item+"</td><td>"+items[i].quantity+"</td><td>"+items[i].total+"</td></tr>"
};<table id="table">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</table>You could also use some framework, such as Alpine.js.
This feature would help you: https://alpinejs.dev/directives/for
There's several ways you can do this. The old school way would be to use innerHTML, but nowadays it's probably best to create a text node.
Example:
for (let i = 0; i < items.length; i++) {
let item = document.getElementById("item");
var itemText = document.createTextNode("foo!");
item.appendChild(itemText);
}
You can use innerHTML and you need to reference the items Array
for (let i = 0; i < items.length; i++) {
document.getElementById("item").innerHTML+= items[i].item +"</br>";
document.getElementById("quantity").innerHTML += items[i].quantity+"</br>";
document.getElementById("total").innerHTML += items[i].total+"</br>";
}