0

Intento insertar en el DOM los resultados obtenidos pero soy incapaz.

Obtengo una template a la cual le voy metiendo la información con un bucle for, pero a la hora de insertar dicha información en el DOM, solo obtengo el último resultado.

He intentado hacerlo con insertBefore(), pero no me sale:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>016</title>
    <script src="js/016.js"></script>
</head>
<body>

    <template id="producto">
        <h2 class="prod"></h2>
        <img class="imagen">
        <p class="espec"></p>
    </template>

</body>
</html>
window.addEventListener('load', ()=>{
    readFileJson();

})

function readFileJson(){
    fetch('json/016.json')
    .then(res => res.json())
    .then(data => {
        getTemplate(data);
    });
}

function getTemplate(data){
    let tmp = document.querySelector('#producto');
    let dvt = document.createElement('div');
        dvt.className = 'product';
        dvt.innerHTML = tmp.innerHTML;


    for(var i = 0;i < data.length;i++){
        dvt.querySelector('.prod').innerHTML = data[i].producto;
        dvt.querySelector('.imagen').setAttribute('src', data[i].img);
        dvt.querySelector('.espec').innerHTML = data[i].especificaciones;

        if(!document.querySelector('.product')){
            document.body.appendChild(dvt);
        } else {
            document.insertBefore(dvt, document.body.nextSibling);
        }
    }
}
[{
    "id":"0001",
    "producto":"NAKAMURA HB02-100",
    "denominacion":"LUMINARIA HIGH BAY (UFO) ALTA EFICIENCIA",
    "fecha_cierre":"15/03/2021",
    "fecha_arribo":"13/06/2021",
    "embarque":"Luminaria HIGH BAY (UFO) MAY-2020",
    "precio":"FOB 33,950",
    "especificaciones":["Potencia: 100 W","Dimmable: NO","Tensión: 100~277 VCA","Eficiencia: 150/160 Lm/W"],
    "img":"/imagenes/201922150722 - Cengo-ZHNSA 100-150-200-240.png"
},
{
    "id":"0002",
    "producto":"NAKAMURA HB01-100",
    "denominacion":"LUMINARIA HIGH BAY (UFO) ANTIDESLUMBRAMIENTO",
    "fecha_cierre":"15/03/2021",
    "fecha_arribo":"13/06/2021",
    "embarque":"Luminaria HIGH BAY (UFO) MAY-2020",
    "precio":"FOB 37,850",
    "especificaciones":["Potencia: 40 W","Dimmable: SI","Tensión: 100~277 VCA"],
    "img":"/imagenes/201915150715 - Cengo-ZHN.png"
},
{
    "id":"0003",
    "producto":"NAKAMURA NK-F-A60-6-E",
    "denominacion":"LAMPARA FILAMENTO A60 6W",
    "fecha_cierre":"31/03/2021",
    "fecha_arribo":"29/06/2021",
    "embarque":"Lámparas JUN-2020",
    "precio":"FOB 0,830",
    "especificaciones":["Potencia: 50 W","Dimmable: NO","Tensión: 100~298 VCA","Frecuencia: 60 Hz"],
    "img":"/imagenes/201925140725 - Enshine-Filament A 60 8w.png"
}]

¿Qué estoy haciendo mal?

0

1 respuesta 1

3

Lo que pasa es que solo estas creando un elemento div y le estas poniendo la información y con el for estas sobrescribiendo su información. Para solucionar esto solo mueve la creación del div dentro del ciclo for


    let tmp = document.querySelector('#producto');
    for(var i = 0;i < data.length;i++){
        let dvt = document.createElement('div');
        dvt.className = 'product';
        dvt.innerHTML = tmp.innerHTML;

        dvt.querySelector('.prod').innerHTML = data[i].producto;
        dvt.querySelector('.imagen').setAttribute('src', data[i].img);
        dvt.querySelector('.espec').innerHTML = data[i].especificaciones;

        if(!document.querySelector('.product')){
            document.body.appendChild(dvt);
        } else {
            document.insertBefore(dvt, document.body.nextSibling);
        }
    }
4
  • Esto crearia varios divs al final del body y cada div tendra una copia modificada de los datos, para que coincida con los datos del array, hmmm... en un principio no parece mala opcion, creo que podria funcionar.
    – Layer
    el 25 mar. 2021 a las 14:34
  • @Riven por qué se crearían al final del body si se supone que se están añadiendo al templete?
    – Christian
    el 25 mar. 2021 a las 14:37
  • a, cierto se me olvida que a lo que se apunta es a un template.
    – Layer
    el 25 mar. 2021 a las 14:55
  • Perfecto, aunque creando un nuevo div en cada iteración el if/else sobra. Igualmente bien visto. muchas gracias.
    – AQMR
    el 26 mar. 2021 a las 7:29

Tu Respuesta

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

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