Tengo que desarrollar un proyecto, tipo carrito de compras, mi js debería recorrer un json, que en este caso está dentro de otro archivo .js, la cuestión es que no lo toma, retorna indefinido, he movido todo y el problema persiste. Este es el js:
document.addEventListener("DOMContentLoaded", function() {
const productContainer = document.getElementById("mercaderia");
products.forEach(function(product){
if(product.avaliable){
const cardProduct = buildProductCard(product);
productContainer.innerHTML += cardProduct;
}
})
})
Este el html donde debe crear:
<script defer src="js/domBuilder.js"></script>
<script defer src="js/info.js"></script>
<script defer src="js/main.js"></script>
<title>ElColdoCocina</title>
</head>
<body>
<!-- NAVBAR-->
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">ElColdoCocina<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class=" col-lg-12">
<h1 class="subtitulo">Nuestros Productos</h1>
</div>
</div>
<div id="mercaderia" class="row"></div>
</div>
**Este la tarjeta que debe crear:**
function buildProductCard(product){
const htmlCard=
`<div class="col-lg-4 mercaderia__card">
<div class="card" style="width: 18rem;">
<img src="${product.image}" class="card-img-top" alt="img">
<div class="card-body">
<h5 class="card-title">${product.name}</h5>
<p class="card-text">${product.description}</p>
<p class="card-text">${product.price}</p>
<a href="#" class="btn btn-primary">Agregar</a>
</div>
</div>
</div>`;
return htmlCard;
}
Y este el json que debe recorrer:
const products = [{
"id" : "AAA001", "name" : "Pan de Jamon", "description" : "Masa hojaldrada relleno de jamon ahumado, panceta ahumada, aceituna y uvas pasas", "img" : "image/pandejamon.jpg", "price" : 700, "available" : true, tags : ["pan", "jamon", "panceta"] },{ "id" : "BBB002", "name" : "Tequeños", "description" : "Masa semi-hojaldrada rellena de queso venezolano, con salsa para dipear", "img" : "image/tequeño.jpg", "price" : 30, "available" : true, tags : ["tequeño", "queso"] },{ "id" : "CCC003", "name" : "Pan de Guayaba", "description" : "Pan de masa suave, relleno de dulce de guayaba y queso venezolano", "img" : "image/panguayaba.jpg", "price" : 600, "available" : true, tags : ["pan", "guayaba", "queso"] }];
Agradecería cualquier ayuda! Gracias!!