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>

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>

• javascript
• html

• what's the question? – HDM91 Commented Dec 6, 2021 at 13:52
• 2 This post has several answers, have a look. – Sameer Commented Dec 6, 2021 at 13:52
• 2 Does this answer your question? How to create a table using a loop? – Sameer Commented Dec 6, 2021 at 13:53
• @HDM91 how i could loop through the array and fill the table – simpledev Commented Dec 6, 2021 at 13:53
• In all honesty, even though I hate when people suggest frameworks, but this is what you should use React, Vue or Angular for. It's just soo much easier when you can add a for loop directly in the HTML code, based on an array. – Rickard Elimää Commented Dec 6, 2021 at 13:54

3 Answers 3

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