Skip to main content
1 de 2

NO ME IMPRIME EN MI DOM LA INFORMACION DEL API

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