Fill HTML table with for loop JS-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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