Estoy tratando de llenar la tabla HTML con la función de JavaScript. Tengo un elemento html donde creé la tabla y obtendré datos del punto final de back-end, por eso estoy tratando de agregar la fecha dinámica.
<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>Puede agregar nuevas filas a 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> También podría usar algún marco, como Alpine.js .
Esta función te ayudaría: https://alpinejs.dev/directives/for
Hay varias maneras de hacer esto. La forma de la vieja escuela sería usar innerHTML, pero hoy en día probablemente sea mejor crear un nodo de texto.
Ejemplo:
for (let i = 0; i < items.length; i++) { let item = document.getElementById("item"); var itemText = document.createTextNode("foo!"); item.appendChild(itemText); }Puede usar innerHTML y necesita hacer referencia a los elementos 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>"; }