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?