📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
In Thymeleaf, we use th:each attribute for iteration. Thymeleaf th:each allows you to declare an iteration status variable.
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html
In the below example, we are using ${employeeStat.index} expression to get an index of the list:
<tr th:each="employee : ${employees}"> <td th:text="${employeeStat.index}"></td> <td th:text="${employee.firstName}"></td> <td th:text="${employee.lastName}"></td> <td th:text="${employee.email}"></td> </tr>
The employeeStat is the aggregation of the variable employee with the suffix Stat.
Complete Example - Thymeleaf Loop or Iteration Over a List by Index Example with Spring Boot
Let's assume that we want to display a list of employees in a simple HTML table using the Thymeleaf engine.
Maven Dependency
Let's add the below dependency to integrate Thymeleaf with Spring boot:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Employee Model Class
In our example application Employee object will have the following structure:
package net.javaguides.springboot; public class Employee { private String firstName; private String lastName; private String email; public Employee(String firstName, String lastName, String email) { super(); this.firstName = firstName; this.lastName = lastName; this.email = email; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } }
Spring MVC Controller - EmployeeController.java
Let's create an EmployeeController class to handle all GET requests to /iteration URI and return a rendered page iteration.html as an output (which is our Thymeleaf template located in /resources/templates)
package net.javaguides.springboot; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class EmployeeController { @GetMapping("/iteration") public String iteration(Model model) { List < Employee > employees = new ArrayList < > (); employees.add(new Employee("Ramesh", "Fadatare", "ramesh@gmail.com")); employees.add(new Employee("John", "Cena", "john@gmail.com")); employees.add(new Employee("Tom", "Cruise", "tom@gmail.com")); employees.add(new Employee("Tony", "Stark", "tony@gmail.com")); model.addAttribute("employees", employees); return "iteration"; } }
Thymeleaf template - iteration.html
We will use th:each to iterate through the list of employees:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>Add Bootstrap CSS Demo</title> <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <h1>Employees</h1> <table class="table"> <thead> <tr> <th>Index</th> <th>Employee First Name</th> <th>Employee Last Name</th> <th>Employee Email</th> </tr> </thead> <tbody> <tr th:each="employee : ${employees}"> <td th:text="${employeeStat.index}"></td> <td th:text="${employee.firstName}"></td> <td th:text="${employee.lastName}"></td> <td th:text="${employee.email}"></td> </tr> </tbody> </table> </div> </div> </body> </html>
Demo
Hit "http://localhost:8080/iteration" URL in the browser will display below web page:
Note that a new Index column with index value is added to the HTML template.
Related Thymeleaf Tutorials and Examples
- Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
- Thymeleaf Example with Spring Boot
- How to Add CSS and JS to Thymeleaf
- Add Bootstrap CSS to Thymeleaf
- How to handle null values in Thymeleaf?
- How to Loop a List by Index in Thymeleaf
- Thymeleaf Array Example - Array Index, Array Iteration
- Thymeleaf Enums Example
- Thymeleaf If Else Condition Example
- Thymeleaf Switch Case Example
Comments
Post a Comment
Leave Comment