Spring Boot Framework

th:each en Thymeleaf para recorrer listas

En este post te mostraré a usar th:each en Thymeleaf para iterar o recorrer colecciones, algo así como dibujar una lista o repetir un elemento HTML.

Además de repetir una lista te enseñaré la sintaxis básica de th:each.

Finalmente veremos un ejemplo con Spring Boot para renderizar una lista de productos traída desde un repositorio que a su vez se conecta con MySQL.

Usar th:each en Thymeleaf

Para recorrer una lista, arreglo o ArrayList en Thymeleaf hay que especificar el atributo th:each al elemento que se va a repetir. Por ejemplo:

See the gist on github.

En el ejemplo de arriba se va a repetir el elemento <li> por cada elemento que haya en lista.

Dibujar tabla usando th:each

También se puede dibujar una tabla con Thymeleaf y th:each como se ve en el siguiente ejemplo:

See the gist on github.

En este caso hay que repetir el elemento <tr> de la tabla HTML. Dentro de ese elemento tenemos acceso a la variable.

Acceder al índice y tamaño de la lista

Si quieres saber en cuál índice estás o deseas saber el tamaño de la lista, declara una segunda variable que será el iterador de la lista. Así:

See the gist on github.

Fíjate en la línea 10, en la misma se está declarando una variable que servirá para iterar la lista de productos.

En este caso además de la variable que será cada elemento de la lista tenemos al iterador. El iterador tiene la propiedad index y size.

Ejemplo de th:each con Spring Boot

Ahora que hemos explicado lo más básico sobre th:each en Thymeleaf veremos cómo combinarlo con Spring Boot. En mi caso debo renderizar una lista de productos.

Tengo mi repositorio de productos:

See the gist on github.

En mi controlador tengo un método que muestra la vista de productos:

See the gist on github.

Finalmente la vista es la siguiente:

See the gist on github.

Con el siguiente resultado:

Ejemplo de tabla dibujada con Thymeleaf usando th:each

Conclusión

En conclusión utiliza th:each para repetir elementos o iterar listas, arreglos, ArrayLists, etcétera.

Recuerda que puedes declarar una segunda variable para acceder al iterador y a su vez al índice o al tamaño de la lista.

Aprende más sobre Thymeleaf o Spring Boot en mi página.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

17 horas hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

1 día hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

1 día hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

3 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

1 semana hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

1 semana hace

Esta web usa cookies.