2

Tengo el siguiente bucle recorriendo unos datos, pero ¿Cómo puedo transformarla en objetos DOM y recorrerla correctamente? Gracias!

resultado.innerHTML = '';

for (let item of datos) {
    // console.log(item.name);
    resultado.innerHTML += `
        <tr>
            <td class="colorNombre">${item.name}</td>
            <td class="colorDireccion">${item.address.street}</td>
            <td class="colorCiudad">${item.address.city}</td>
        </tr>`
}
2
  • 1
    ¿Lo que pretendes es crear un tr por cada elemento del array datos?
    – VRoxa
    Commented el 26 feb. 2021 a las 12:40
  • si correcto y luego recorrerlo de alguna manera Commented el 26 feb. 2021 a las 12:41

3 respuestas 3

8

Referente al detalle que comentaba @A.Cedano

Crear un elemento y añadirlo al elemento padre por cada iteración va a suponer que el DOM tiene que renderizar n veces el elemento padre, donde n es la longitud del array.

Por ello, una solución más óptima es crear un array de todos esos elementos que queremos añadir y, una vez los tengamos todos, añadirlos de una sola vez.

Podemos usar Array.prototype.map para crear un elemento tr por cada elemento de datos.

const rows = datos.map(createTableRow);
resultado.append(...rows);

La función createTableRow tendrá un item del array por parámetro y retornará un elemento tr.

const createTableRow = ({ name, address }) => {
    const createColumn = (value, klass) => {
        const column = document.createElement('td');
        column.innerHTML = value;
        column.className = klass;
        return column;
    }

    const row = document.createElement('tr');

    row.append(
        createColumn(name, 'colorNombre'),
        createColumn(address.street, 'colorDireccion'),
        createColumn(address.city, 'colorCiudad')
    );
    
    return row;
}

Dejo la documentación de Node.append por si fuera necesario.

También dejo un fiddle con un pequeño ejemplo del código.

Disclaimer
La respuesta de @z3nth10n es totalmente válida.
Sólo quería proponer otra forma de hacerlo.

Espero que sirva.

3
  • Excelente respuesta, me parece genial que la sugerencia sea trabajar sobre elementos HTML en lugar de una cadena y agregar todo solo con apend(). En lugar de fiddle, podrías agregar el ejemplo directamente en la respuesta con un fragmento de código ejecutable
    – Triby
    Commented el 26 feb. 2021 a las 19:15
  • Hola, @Triby, gracias por el comentario. La verdad es que prefiero el fiddle. Si agrego todo el fragmento de código ejecutable en el mismo post, puede ofuscar la respuesta. Prefiero dejar las cosas triviales como el HTML o el CSS (o la declaración del array de datos) en un fiddle para centrar la atención en lo que realmente importa.
    – VRoxa
    Commented el 26 feb. 2021 a las 19:37
  • Sería más fácil para ti crear todo aquí mismo y, para evitar esas distracciones, el fragmento de código se puede colocar oculto, de forma que aparezca un enlace para mostrar y ejecutar. Por supuesto, solo estoy sugiriendo una opción que es cuestión de preferencias y, en verdad, no afecta cuando hay una buena respuesta, bien detallada y documentada, como en este caso.
    – Triby
    Commented el 26 feb. 2021 a las 19:42
5

Si te interesa escribir código optimizado, podrías hacerlo también mediante el uso de DocumentFragment. Al final de la respuesta pongo algunas cosas sobre esta propiedad del DOM, porque me parece que es una gran desconocida, siendo que debería ser la herramienta ideal para añadir contenido masivo en el DOM.

Por ejemplo:

/*Set de datos de ejemplo*/
var datos = [
  {
    name: "Pedro",
    address: {street:"1st Street", city:"New York"}
  },
  {
    name: "Marta",
    address: {street:"2nd Street", city:"París"}
  },  
  {
    name: "Juan",
    address: {street:"3th Street", city:"London"}
  } 
  ]
  
var resultado  = document.getElementById('oneTable'); 
var fragment = document.createDocumentFragment();

/*OJO: Esto se definía N veces en el bucle*/
var clases = ['colorNombre', 'colorDireccion', 'colorCiudad'];
  
for(let item of datos) {
   var tr = document.createElement('tr');
   var tds = [item.name, item.address.street, item.address.city];

   for(var i = 0; i < tds.length; ++i) {
      var td = document.createElement('td');
      td.setAttribute('class', clases[i]);
      /*createTextNode es más seguro para agregar contenido*/
      td.appendChild(document.createTextNode(tds[i]));      
      tr.appendChild(td);
      fragment.appendChild(tr);
   }
}
/*
  Agregamos el fragmento al elemento del DOM
  al salir del bucle, de modo que el DOM
  se renderizará una sola vez, no N veces
*/
resultado.appendChild(fragment);
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel="stylesheet"/>
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="oneTable">
<thead>
  <tr>
    <th>Name</th>
    <th>Street</th>
    <th>City</th>
  </tr>
</thead>
</table>

Un gran desconocido

En la web, incluyendo nuestro querido Stackoverflow.es, cada vez que se trata de crear elementos del DOM en bucles, lo que se suele ver es código basado en una práctica no recomendada que consistiría en hacer append de esos elementos directamente en el DOM dentro del bucle.

Quienes programan con tal ingenuidad ignoran que la modificación del DOM tiene una precio. Cada vez que haces append dentro de un bucle significa que el DOM se va a renderizar N veces. Por tanto, si el bucle tiene mil elementos, habrá mil renderizaciones del DOM. Hay prácticas peores, que hacen varios append dentro de un mismo bucle, multiplicando las N renderizaciones por esa cantidad de append.

Hay un gran olvidado para estos casos, se llama createDocumentFragment(), el cual, según MDN:

Crea un nuevo DocumentFragment vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.

DocumentFragment son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso más común es crear un document fragment, agregar elementos al document fragment y luego agregar dicho document fragment al arbol del DOM. En el arbol del DOM, el document fragment es remplazado por todos sus hijos.

Dado que el document fragment es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan reflow (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar document fragments usualmente resultan en mejor performance.


PD

He introducido algunas mejoras en el código, sin detenerme a analizar la forma de leer los datos en el objeto. En ese sentido la respuesta de @VRoxa parece ser más simple.

La intención de mi respuesta es mostrar un ejemplo de uso de DocumentFragment, según la petición de @JuanRivera en su comentario.

1
  • 3
    Cada día se aprende algo nuevo, ese gran desconocido me será muy útil y seguramente lo voy a comenzar a aplicar en mis proyectos y ejercicios.
    – Triby
    Commented el 26 feb. 2021 a las 19:47
4

Realmente lo que debes hacer es lo siguiente:

for(let item of datos) {
   var tr = document.createElement('tr');

   var elementos = [item.name, item.address.street, item.address.city];
   var clases = ['colorNombre', 'colorDireccion', 'colorCiudad'];

   for(var i = 0; i < 3; ++i) {
      var td = document.createElement('td');

      td.setAttribute('class', clases[i]);
      td.innerText = elementos[i];

      tr.appendChild(td);
   }

   resultado.appendChild(tr);
}

Así añadiras los objetos usando DOM y un una string.

3
  • 1
    muchas gracias por la respuesta @z3nth10n era lo que estaba buscando un saludo ! Commented el 26 feb. 2021 a las 12:54
  • 2
    Es una mala práctica modificar constantemente el DOM dentro de bucles. Es mejor crear todo en una cadena y hacer append una sola vez, o mejor aún crear un fragmento del DOM (ver aquí) Así el código queda optimizado.
    – A. Cedano
    Commented el 26 feb. 2021 a las 13:11
  • 3
    @A.Cedano interesante, podrias crear una respuesta indicando lo que dices? Me gustaria a mi y creo que a los demas miembros de la comunidad, ver ese detalle Commented el 26 feb. 2021 a las 13:42

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.