0

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!!

4
  • ¿Y cómo obtienes el JSON Desde tu JS?
    – Rodrigo
    Commented el 22 ene. 2021 a las 0:57
  • Con el forEach del js le paso por parámetro el JSON. Todos estan linkeados en e HTML. Commented el 22 ene. 2021 a las 0:59
  • ¿Le pasas el JSON como string, verdad?
    – Rodrigo
    Commented el 22 ene. 2021 a las 1:01
  • Si, es decir que habria que convertirlo con el json.stringify? Commented el 22 ene. 2021 a las 1:08

1 respuesta 1

1

Asumo que le pasas el JSON como string, al pasarle el JSON como string la cosa varía, ya que necesitarás usar JSON.parse(), este método convierte un JSON en string a un objeto o array

Y el método JSON.stringify() convierte un JSON a un string

De manera que tenemos:

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

const productContainer = document.getElementById("mercaderia");
    productsJSON = JSON.parse(products)
    productsJSON.forEach(function(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>`;
            document.write(htmlCard)
})
<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>

1
  • Todo el JSON esta en otro archivo js, todos linkeados en el html y en js con variables globales, y aún así no muestra. Gracias por tu respuesta!! Commented el 22 ene. 2021 a las 1:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.