1

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"
}
]
6
  • 1
    sinceramente te recomiendo que uses template string, esto lo puedes agregar donde quieras, tambien puedes usar la funcion createElement()
    – Christian
    Commented el 21 mar. 2021 a las 20:10
  • @christian, se puede usar documentCreateFragment() con template strings? Commented el 21 mar. 2021 a las 20:20
  • @HernánGarcia si se puede, pero creo que no tiene mucho sentido hacerlo
    – Layer
    Commented el 21 mar. 2021 a las 20:29
  • @Riven, a que te refieres, a usar template strings con fragments o a agregar tags dinamicamente a un template html? Commented el 21 mar. 2021 a las 20:32
  • 1
    @HernánGarcia a lo que me refiero es que como te decía el usuario 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 elementos HTML, por eso digo que no tiene mucho sentido renderizar un fragment en un template, ya que eso seria redundante.
    – Layer
    Commented el 21 mar. 2021 a las 20:40

1 respuesta 1

2

Para esto sería mejor cambiar en el template la etiqueta <p> por un <div> para que contenga las <p> creadas dinámicamente. Recorrer los items del array devuelto y agregar al <div> utilizando template strings. Debe limpiar el contenido del div del template para la siguiente iteración.

<!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" />
      <div id="espec"></div>
    </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;
            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;
              //agregar al div
              el.especificaciones.forEach((item) => {
                $template.querySelector("#espec").innerHTML += `<p>${item}</p>`;
              });
              let $clone = document.importNode($template, true);
              $fragment.appendChild($clone);
              //limpiar despues de agregar para que no se repitan en la siguiente iteración
              $template.querySelector("#espec").textContent = null;
            });

            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>

4
  • es correcto, no esta implementada esa parte porque no se como hacerla, de aqui la consulta. Commented el 21 mar. 2021 a las 21:56
  • Ya puede verificar los cambios realizados
    – WilsonPT
    Commented el 21 mar. 2021 a las 23:47
  • Perfecto. Muchisimas gracias!! Commented el 22 mar. 2021 a las 0:14
  • Listo Hernán, de nada.
    – WilsonPT
    Commented el 22 mar. 2021 a las 2:37

Tu Respuesta

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

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