tengo el siguiente codigo de ejemplo, el cual toma datos del json que tambien adjunto. El caso es que las especificaciones no tienen todas la misma cantidad de items, por consiguiente no puedo armar la estructura en el template. Hay forma de agregar dinamicamente al template etiquetas p, por ejemplo, que contengan los datos de las especificaciones? Tambien he pensado en usar template strings, que segun lei es mejor opcion que pero en realidad me agrada mas la etiqueta . No se que mas agregar ya que la pagina me esta pidiendo que añada mas detalles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lámparas</title>
<style>
.imagen{
width: 150px;
height: auto;
}
h2{
background:steelblue;
}
</style>
</head>
<body>
<template id="producto">
<h2></h2>
<img class="imagen">
<p id="espec"></p>
</template>
<script>
(()=>{
const xhr = new XMLHttpRequest(),
$xhr = document.getElementById("xhr"),
$fragment = document.createDocumentFragment();
xhr.addEventListener("readystatechange",(e)=>{
if(xhr.readyState !== 4) return;
if(xhr.status >= 200 && xhr.status < 300){
console.log("EXITO")
let json = JSON.parse(xhr.responseText);
$template = document.getElementById("producto").content;
$espec = document.getElementById("espec");
json.forEach(function(el,indice) {
$template.querySelector("img").setAttribute("src",el.img);
$template.querySelector("img").setAttribute("alt","FOTO LAMPARA");
$template.querySelector("h2").textContent = el.producto;
$template.querySelector("p").textContent = "Especificaciones:";
let $clone = document.importNode($template, true);
$fragment.appendChild($clone);
});
document.querySelector("body").appendChild($fragment);
} else {
console.log("ERROR");
let message = xhr.statusText || "Ocurrió un error";
$xhr.innerHTML = `Error ${xhr.status}: ${message}`;
}
});
xhr.open("GET","/productos.json");
xhr.send();
})();
</script>
</body>
</html>
[{
"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"
}
]
createElement()
christian
seria mejor que usaras template strings en vez de intentar renderizar nuevos elementos dinamicamente en una etiqueta<template>
, ya que los template strings te permiten muchas cosas aparte de renderizar directamente elementosHTML
, por eso digo que no tiene mucho sentido renderizar un fragment en un template, ya que eso seria redundante.