Así que soy nuevo en JS y estoy haciendo un ejercicio en el que quiero crear un carrito de compras. El requisito es usar "fuente de datos dinámicos" y no atributos de código fijo en el HTML, así que he creado este objeto que solo quiero mostrar en mi HTML, por ejemplo, la descripción, la imagen, etc. Tengo todo para trabajar con atributos "estáticos" en el HTML siguiendo un tutorial, pero quiero usar una fuente de datos en su lugar, ya que ese es un caso más real, donde actualizaría la fuente de datos y luego se actualizaría automáticamente en la página web.
El mensaje de error es que he declarado la misma variable dos veces pero realmente no entiendo cómo. Dado que solo llamo a productos y no los declaro nuevamente ... también solo imprime "objeto objeto objeto" en mi HTML.
Error de sintaxis no capturado: el identificador 'productos' ya se ha declarado (en store.js: 1: 1)
const products = [{ "name": "Aloe Vera", "origin": "Netherlands", "description": "Some text", "height": "120cm", "image": "img/alovera.jpeg", "price": 100 + "kr" }, { "name": "Hemp", "origin": "Denmark", "description": "some text", "height": "50-100cm", "image": "img/hemp.jpeg", "price": 200 + "kr" } ]; if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', ready) } else { ready() } function ready() { for (var i = 0; i < products.length; i++) { var li = document.createElement("li"); var text = document.createTextNode(products[i]); li.appendChild(text); document.getElementById("basket").appendChild(li); console.log(products[i]); } } <table class="table" id="basket"> <thead> <tr> <th>Produkt</th> <th>Antal</th> <th>Pris</th> </tr> </thead> </table>Puede verificar la implementación a continuación con encabezados y filas dinámicos
También dejé algunos comentarios útiles allí para resolver posibles problemas que está enfrentando.
const products = [{ "name": "Aloe Vera", "origin": "Netherlands", "description": "Some text", "height": "120cm", "image": "img/alovera.jpeg", "price": 100 + "kr" }, { "name": "Hemp", "origin": "Denmark", "description": "some text", "height": "50-100cm", "image": "img/hemp.jpeg", "price": 200 + "kr" } ]; if (document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', ready) } else { ready() } function createRowData(product, attribute) { var rowData = document.createElement("td"); const text = document.createTextNode(product[attribute]); rowData.appendChild(text); return rowData } //define column names //keys are matched with product object //values are matched with table header const columnNames = { "name": "Produkt", "origin": "Antal", "price": "Pris" } function ready() { //add dynamic headers according to `columnNames` values const headerRow = document.createElement("tr"); Object.values(columnNames).forEach((columnTitle) => { var rowData = document.createElement("th"); const text = document.createTextNode(columnTitle); rowData.appendChild(text); headerRow.appendChild(rowData); }) document.querySelector("#basket thead").appendChild(headerRow); //add dynamic rows according to `columnNames` keys aligned with product object for (let i = 0; i < products.length; i++) { const row = document.createElement("tr"); Object.keys(columnNames).forEach((productAttribute) => { const rowData = createRowData(products[i], productAttribute); row.appendChild(rowData); }); document.querySelector("#basket tbody").appendChild(row); } } <table class="table" id="basket"> <thead></thead> <tbody></tbody> </table>Lo que es súper extraño es que obtengo el mismo error cuando solo ejecuto este código básico que debería publicar esto...
document.getElementById("basket").innerHTML = products.name; Uncaught SyntaxError: Identifier 'products' has already been declared (at store.js:1:1)También obtenga "indefinido" impreso ...