0

soy novicio en este mundo de html/css/js y quisiera la opinion de gente con experiencia en cuanto a este codigo que implemente para generar una lista de productos a partir de un json que se envia desde una api en el backend. Primero lo intente con el tag template y fragments pero como los elementos no tienen todos la misma cantidad de especificaciones se me complico un poco meter dinamicamente dentro de un template y por consejo de algunos de ustds (en otra pregunta que hice) me decidi por usar template strings, voy a dejar el codigo para recibir opiniones si habria una forma mejor de implementarlo, ya que no se sobre todo, si es bueno usar innerHtml para inyectar codigo al DOM, tal vez haya una mejor forma, por eso de principio quise usar fragments, que por lo que lei son mejores para generar estructuras DOM virtuales. Bueno, no lo alargo mas, si es necesario el json lo pueden encontrar en Agregar tags dinamicamente a <template>, es posible? Desde ya muchas gracias!!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Lámparas</title>

  </head>

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

  <script>
      (()=>{
        const xhr = new XMLHttpRequest(),
        $xhr = document.getElementById("xhr");
        let $contenido;

        xhr.addEventListener("readystatechange",(e)=>{
          if(xhr.readyState !== 4) return;

          if(xhr.status >= 200 && xhr.status < 300){
                        
            let json = JSON.parse(xhr.responseText);          
            
            json.forEach(function (el) {
              
              $contenido = json.map(el=>`<h1>${el.producto}</h1>
              <h3>${el.denominacion}</h3>
              <img src="${el.img}"" class="imagen">
              <p>Especificaciones</p>
              <div>${el.especificaciones.map(elem=>`<p>${elem}</p>`).join("")}</div>`).join("");
              console.log(el)
            });
            
            document.querySelector("body").innerHTML=$contenido;

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

1 respuesta 1

0

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(!' " ')

2
  • valoro tu interes pero tomaste el ejemplo citado en mi pregunta anterior, que deje para tomar el json, y no el de esta propia pregunta, yo cambie el metodo de usar la estructura template html a usar template strings. Por otra parte el codigo que pones es para un numero fijo de especificaciones, creo, y si te fijas en el json las especificaciones no son en todos los productos la misma cantidad. Gracias de todos modos! el 29 mar. 2021 a las 1:35
  • Entonces prueba lo siguiente que te pongo. Que así es como lo hice con template literal.
    – AQMR
    el 29 mar. 2021 a las 12:02

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.