Fill HTML table with for loop JS

Question

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>

[This](https://stackoverflow.com/questions/27594957/how-to-create-a-table-using-a-loop/27595607) post has several answers, have a look. — Sameer, Dec 06 '21 at 13:52
Does this answer your question? [How to create a table using a loop?](https://stackoverflow.com/questions/27594957/how-to-create-a-table-using-a-loop) — Sameer, Dec 06 '21 at 13:53
@HDM91 how i could loop through the array and fill the table — simpledev, Dec 06 '21 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ää, Dec 06 '21 at 13:54
@RickardElimää this is true but one of the requirements it is to be pure HTML and JS — simpledev, Dec 06 '21 at 13:56

score 3 · Answer 1 · answered Dec 06 '21 at 13:55

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

score 2 · Answer 2 · answered Dec 06 '21 at 14:00

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

mrall · Accepted Answer · 2021-12-06T14:04:54.353

0

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

edited Dec 06 '21 at 14:04

answered Dec 06 '21 at 13:59

mrall

140
4

1

But this would not add new rows, it would replace the existing instead. – RatajS Dec 06 '21 at 14:00
oh, yes, edited it, did not catch that at first. – mrall Dec 06 '21 at 14:06
But do notice what RatajS points out, yes my answer gets your immediate data into the table, and as is, the new data would keep getting spaced into the same rows, but you may want new table rows created for each set of data, as it may look neater, so take a good look at RatajS answer as well. – mrall Dec 06 '21 at 14:18

Fill HTML table with for loop JS

3 Answers3