Renderizado Dinámico de Objetos en HTML con JavaScript

La información que posean tus variables en el código Javascript, pueden ser procesadas y renderizadas hacia el DOM para visualizar la información en el navegador web y que el usuario pueda interactuar con los datos.

Creando código HTML con Javascript

El término “renderizar” hace referencia al proceso que lleva a cabo el navegador para leer el código HTML y CSS para posteriormente dibujarlo en el navegador. Con Javascript, puedes crear código HTML de forma dinámica y lograr que el navegador muestre esos datos dentro del DOM de una página web.

Una vez tengas los datos preparados en tu código Javascript.

let hipodoge = new Mokepon('Hipodoge', './assets/hipodoge.jpg', 5);
let capipepo = new Mokepon('Capipepo', './assets/capipepo.jpg', 5);
let ratigueya = new Mokepon('Ratigueya', './assets/ratigueya.jpg', 5);
mokepones.push(hipodoge, capipepo, ratigueya);

Define dónde quieres mostrar los mismos en el código HTML. Para eso puedes crear un simple <div> con un ID para poder capturar el elemento con JS.

<div id="contenedorTarjetas">
</div>

A continuación, captura el elemento con document.getElementById(). Utilizaremos una nueva función llamada forEach() que todos los arreglos poseen para poder iterar cada elemento del mismo. El término “iterar” hace referencia a recorrer los elementos de un array, uno por uno en el mismo orden en el que se encuentran.

// Capturamos el elemento en el HTML
const contenedorTarjetas = document.getElementById('contenedorTarjetas');

// Recorremos el array de mokepones
mokepones.forEach((mokepon) => {
    const opcionDeMokepones = `
        <input type="radio" name="mascota" id=${mokepon.nombre} />
        <label class="tarjeta-de-mokepon" for=${mokepon.nombre}>
            <p>${mokepon.nombre}</p>
            <img src=${mokepon.foto} alt=${mokepon.nombre}>
        </label>
    `;
    contenedorTarjetas.innerHTML += opcionDeMokepones;
});

Observa que dentro del forEach(), estamos declarando una función que recibe como parámetro una variable en singular llamada mokepon. Aquí encontrarás el objeto con sus atributos y la información que renderizaremos al HTML.

Dentro de esta función que se ejecutará una vez por cada iteración, estamos usando las comillas invertidas para escribir código HTML como si fuese texto simple. Este texto es procesado por Javascript y nos permite pasarle valores de variables a través de la sintaxis ${mokepon.nombre}.

De esta manera, puedes concatenar el código HTML generado por Javascript con el valor de las variables que necesites.

Finalmente, utiliza la propiedad innerHTML para insertar el código HTML en el DOM. Presta atención al += que nos permite concatenar cada iteración del array y que todos los datos se muestren correctamente.

Verás en el navegador web, los datos estructurados y renderizados desde el código Javascript.

Conclusión

El código HTML que escribes directamente en tus archivos .html, suele ser estático. Javascript es quién otorga la posibilidad de que la página tenga vida y la información que se muestre cambie a medida que el usuario interactúa con la aplicación, provoca algún evento o realiza la solicitud de nueva información.

---

Contribución creada por: Kevin Fiorentino (Platzi Contributor)