En mi caso he cambiado un poquito la template para que sea más fácil de trabajar con ella:
<!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');
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[0]
+'</br>'
+data[i].especificaciones[1]
+'</br>'
+data[i].especificaciones[2]
+'</br>'
+data[i].especificaciones[3];
document.body.appendChild(dvt);
}
}
[{
"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"
}]
Basándome en el archivo Json que pasaste, lo copié y pegué en un archivo local. Así el js
será el único encargado de hacer el trabajo:
Cuando carga la página, activa la función readFileJson()
, la cual LEE con fetch
el archivo que yo mismo le indico (en este caso, en el path: 'json/016.json') y lo mete dentro de un Array.
Manda la información del array a través de la función getTemplate()
, la cual busca en el html
la template #producto
(cuidado con los id).
Hacemos un bucle for para comenzar a iterar. Seleccionamos como fin de bucle el length del array, por tanto, va a iterarse 3 veces. Si después al json le añades un campo más, serán más iteraciones. Esto te vale para que sea algo dinámico.
Dentro del bucle for, creamos un div por cada iteración, a cada uno le damos una clase y le metemos el contenido de la template dentro con innerHTML.
Después, seleccionamos los valores que queremos ir metiendo dentro del div:
- Buscamos el h2 con clase
.prod
, y hacemos que su contenido (innerHTML) sea igual al objeto del array iterado (data[i]) con nombre producto.
- (carezco de la imagen, pero solamente tienes que poner tu el path), pero será la imagen iterada que corresponda.
- Y después las especificaciones. Me tomé la libertad de ordenarlas con saltos de línea, ya que todo junto quedaba bastante ilegible.
Una vez seleccionado y puesto todo en su sitio, solamente tenemos que hacer ese div hijo del body, o de lo que sea (en este caso, body).
document.body.appendChild(dvt)
Ojo, tiene que estar también dentro del bucle for, sino, no se añadirá nada ya que dvt es una variable local del bucle for.
Espero que te sirva :3
[EDIT]
window.addEventListener('load', ()=>{
readFileJson();
console.log(25555555.15*2);
})
function readFileJson(){
fetch('json/016.json')
.then(res => res.json())
.then(data => {
getTemplate(data);
});
}
function getTemplate(data){
// let tmp = document.querySelector('#producto');
for(var i = 0;i < data.length;i++){
let dvt = document.createElement('div');
dvt.className = 'product';
//dvt.querySelector('.prod').innerHTML = data[i].producto;
var prod = data[i].producto;
//dvt.querySelector('.imagen').setAttribute('src', data[i].img);
var imag = data[i].img;
var tmp = `<h2>`+prod+`</h2>
<img src="`+imag+`">`;
dvt.innerHTML = tmp;
document.body.appendChild(dvt);
for(j=0;j<data[i].especificaciones.length;j++){
var par = `<p>`+data[i].especificaciones[j]+`</p>`;
dvt.innerHTML += par;
}
}
}
De esta forma, da igual cuántas especificaciones tengas, ya está resuelto de forma dinámica. A parte, lo tienes hecho con una template string (al menos como yo se hacerlas).
Espero que esto si te sirva =3
Pd: para usar la template string tal y como yo la he usado, añadiendo los \n donde quiero, usé las comillas ` (a la derecha de la letra p), si son otras, no funcionan(!' " ')