2

Existe alguna manera de realizar un for dentro de un template literal en js?

Recupero de un JSON y accedo a ellos en un primer for y todo va bien pero, después la clave de Permisos tiene un valor del tipo arreglo, por eso quería saber si se puede realizar dígamos algo así:

for (let fila of r) {
        tablaNotas.appendChild(stringToRowNode(
            `<div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-parent="#accordion" data-toggle="collapse" href="#${fila["IdUsuario"]}${fila["IdPermiso"]}" aria-expanded="false" aria-controls="${fila["IdUsuario"]}${fila["IdPermiso"]}">
                        ${ fila["Email"].toString().toUpperCase()}
                        </a>
                      </h4>
                      <button type="button" class="collpase-button collapsed" data-parent="#accordion" data-toggle="collapse" href="#${fila["IdUsuario"]}${fila["IdPermiso"]}"></button>
                    </div>
                    <div class="panel-collapse collapse" role="tabpanel" id="${fila["IdUsuario"]}${fila["IdPermiso"]}">
                      <div class="panel-body">

                            for(let ${p} of ${ fila["Permisos"] }) {
                                <p>${ p["IdPermiso"] }</p>
                                <p>${ p["Nombre"] }</p>
                            }

                       </div>
                    </div>
                 </div>`
        ));
    }

Eso es lo que trato de hacer.

Es esto posible o existe alguna función que me permita realizar algo parecido?

2 respuestas 2

5

No como quieres, pero en un string template puedes poner cualquier código entre ${ } que devuelva algo. Por tanto podrías crear lo siguiente:

let array = ['A','B','C']

let string = 
`<ul>
  ${array.map(elem => `<li>${elem}</li>`).join('')}
</ul>`;

document.body.innerHTML+=string;

Por tanto, tu bucle for

for(let ${p} of ${ fila["Permisos"] }) {
  <p>${ p["IdPermiso"] }</p>
  <p>${ p["Nombre"] }</p>
}

se podría transformar en:

${fila.Permisos.map(p => `<p>${p.IdPermiso}</p> <p>${p.Nombre}</p>`).join('')}
1
  • gracias!! me vino de perlas!! Commented el 21 mar. 2021 a las 21:55
4

Podrías hacerlo de esta forma.

Donde recorres primeramente el arreglo y sumas las filas correspondientes, después insertas el resultados a tu template.

let arreglo = [{"IdPermiso": 1, "Nombre": "Admin"}, {"IdPermiso": 2, "Nombre": "User"}];
let parrafos = '';
for(let p of arreglo) {
         parrafos += `<p>${ p["IdPermiso"] } / ${ p["Nombre"] }</p>`;
      }
let texto = `<div class="panel-body">${parrafos}</div>`;


document.getElementById("container").innerHTML = texto;
<div id="container"></div>

2
  • Lo siento, estuvo demás incluir jQuery. Ya modificado.
    – jolsalazar
    Commented el 18 dic. 2019 a las 15:35
  • Sí de hecho no lo utilizo, ya edité la pregunta para que quede un poco más claro a que me refiero Commented el 18 dic. 2019 a las 15:38

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.