1

Buenas tardes espero que me puedan ayudar, hace unos dias he estado siguiendo un curso sobre el Dom en Javascript, por lo que se ha realizado una practica en la cual tenemos que crear un carrito de compras. Estoy usando templates de HTML y los fragments para evitar el reflow en el sitio web, ademas de bootstrap para los estilos.

Mi problema radica en que he estado intentando imprimir una informacion de una api en mi Dom, pero no me ha sido posible, (tengo el api en local) asi que intente hacer el fetch desde el link de Json placeholder directamente pero de igual manera no se imprimio en pantalla los datos que necesitaba. Ademas corrobore que se estuviese haciendo bien la peticion al api con un console.log y me arrojaba la informacion que necesitaba de manera exitosa, segui ademas los pasos del tutorial para ver si me estaba pasando algo por alto, no halle nada diferente, de hecho probe con crear un array y esos datos imprimirlos en el dom para ver si funcionaba bien la template y el fragment y asi fue. Funciono. No se que pueda estar ocurriendo a la hora de imprimir los valores del api,Les agradeceria si me pueden ayudar a solucionarlo, GRACIAS.

Aqui dejo mi Html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <title>Carrito de compras</title>
  </head>
  <body>
    <div class="container">
      <h1>Carrito</h1>
      <hr>
      <div class="row" id="items"></div>
    </div>

    <template id="template-card">
      <div class="col-12 mb-2 col-md-4">
        <div class="card">
          <div class="card-body">
            <h5>Titulo</h5>
            <p>precio</p>
            <button class="btn btn-dark">Comprar</button>
          </div>
        </div>
      </div>
    </template>
    


    <script src="app.js"></script>

  </body>
</html>

Mi Javascript(Cabe resaltar que la template la quiero imprimir en el div "items" y la informacion que necesito en el h5 de la template)

const items = document.getElementById('items')
const templateCard = document.getElementById('template-card').content;
const fragment = document.createDocumentFragment();

document.addEventListener('DOMContentLoaded', () => { 
    fetchData() 
});

// Recibir los elementos de la api
const fetchData = async () => {
    try {
        const res = await fetch("api.json")
        const data = await res.json()
        pintarCards(data)
        
    } catch (error) {
        console.log(error)
    } 

}



// template de las cards
const pintarCards = (data) => {
    data.forEach(producto => {
        templateCard.querySelector('h5').textContent = producto.title
        const clone = templateCard.cloneNode(true)
        

        fragment.appendChild(clone)
        
        
    });

}
items.appendChild(fragment)

El api

[
    {
      "precio": 500,
      "id": 1,
      "title": "Café",
      "thumbnailUrl": "https://picsum.photos/id/0/600"
    },
    {
      "precio": 300,
      "id": 2,
      "title": "Pizza",
      "thumbnailUrl": "https://picsum.photos/id/10/600"
    },
    {
      "precio": 100,
      "id": 3,
      "title": "Agua",
      "thumbnailUrl": "https://picsum.photos/id/20/600"
    },
    {
      "precio": 50,
      "id": 4,
      "title": "Sandía",
      "thumbnailUrl": "https://picsum.photos/id/30/600"
    },
    {
      "precio": 10,
      "id": 5,
      "title": "Mango",
      "thumbnailUrl": "https://picsum.photos/id/40/600"
    },
    {
      "precio": 150,
      "id": 6,
      "title": "Chela",
      "thumbnailUrl": "https://picsum.photos/id/50/600"
    }
  ]

2 respuestas 2

3

El problema es el orden en que se procesan las instrucciones en tu javascript.

Fïjate que estás usando async/await en la función fetchData, y dentro del async estás llamando a la función pintarCards, la cual parece procesarse correctamente.

Pero luego dejas fuera de la función la impresión de su resultado, que es:

items.appendChild(fragment)

el cual, al estar fuera de la función y del ámbito del async, ya se ha procesado antes sin agregar nada y sin dar error.

La solución pasa por mover esa línea al final de la función pintarCards, para que quede de este modo:

// template de las cards
const pintarCards = (data) => {
    data.forEach(producto => {
        templateCard.querySelector('h5').textContent = producto.title
        const clone = templateCard.cloneNode(true)
        fragment.appendChild(clone)
    });
    items.appendChild(fragment)
}

y con eso ya deberia funcionarte como esperas.

Ya nos dirás si te ha funcionado (en mis pruebas sí me ha funcionado como puedes ver en la imagen de abajo).

introducir la descripción de la imagen aquí

2
  • Me funciono perfecto ! . Muchas gracias !
    – Tomas Mv
    Commented el 18 may. 2022 a las 23:23
  • Me alegro por ti :-) Recuerda marcar como aceptada la respuesta para que la comunidad lo sepa y la pregunta no quede eternamente pendiente, gracias. Mira este enlace para aprender a aceptar respuestas y entender el porque es importante hacerlo cuando la respuesta es válida para tu pregunta.
    – masterguru
    Commented el 18 may. 2022 a las 23:27
0

me encontre con algunos detalles en tu codigo:

  • la parte donde generas el template, nos podrías comentar por qué generas un fragment?
  • te lo comento porque restructure todo tu codigo y quitando la parte del template ya se ven las cards
  • silo quieres dentro de items creo que solo necesitas items para que funcione. y ahi inyectas todo el codigo

const items = document.getElementById('items')
//const templateCard = document.getElementById('template-card');
      
document.addEventListener('DOMContentLoaded', () => fetchData() );

// Recibir los elementos de la api
const fetchData = async () => {
    try {
        const res = await fetch("api.json"),
              data = await res.json();
        
        pintarCards(data);
        
    } catch (error) {
        console.log(error)
    } 

}



// template de las cards
const pintarCards = (data) => {

    data.forEach( ({title, precio}) => {

      let html =   `<div class="col-12 mb-2 col-md-4">
                      <div class="card">
                        <div class="card-body">
                          <h5 id="titulo">${title}</h5>
                          <p>${precio}</p>
                          <button class="btn btn-dark">Comprar</button>
                        </div>
                      </div>
                    </div>`;

      items.insertAdjacentHTML('beforeend', html);


        
    });

}
//items.appendChild(fragment)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <title>Carrito de compras</title>
  </head>
  <body>
    <div class="container">
      <h1>Carrito</h1>
      <hr>
      <!--solo deje esto, lo demas se genera en el js-->
      <div class="row" id="items"></div>
    </div>
    
    <script src="script.js"></script>

  </body>
</html>

Aca no puedo hacer la llamada de la api pero espero te sirva. Se me olvidaba,en el html, cambie el nombre del archivo.

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.