Thymeleaf is a Java-based template engine used for processing HTML, XML, JS, and many other documents. In this tutorial, we will learn how to iterate over a list of objects in the Thymeleaf HTML page using th:each attribute.
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html
In this example, we will create a Spring boot project to demonstrate the iteration in Thymeleaf.
Iteration attribute th:each
Thymeleaf comes with a special attribute th:each, used to iterate over collections of different object types.
There are several objects that Thymeleaf considered iterable:
- objects implementing java.util.Iterable interface,
- objects implementing java.util.Enumeration interface,
- objects implementing java.util.Iterator interface,
- objects implementing java.util.Map interface,
- and also arrays.
Thymeleaf Loop or Iteration 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
EmployeeController class was defined 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>Employee First Name</th>
<th>Employee Last Name</th>
<th>Employee Email</th>
</tr>
</thead>
<tbody>
<tr th:each="employee : ${employees}">
<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>
Status Variable
Thymeleaf also enables a useful mechanism to keep track of the iteration process via the status variable.
The status variable provides the following properties:
- index: the current iteration index, starting with 0 (zero)
- count: the number of elements processed so far
- size: the total number of elements in the list
- even/odd: checks if the current iteration index is even or odd
- first: checks if the current iteration is the first one
- last: checks if the current iteration is the last one
Let's see how the status variable works in our example:
<tr th:each="employee : ${employees}"
th:style="${employeeStat.odd}? 'font-weight: bold;'"
th:alt-title="${employeeStat.even}? 'even' : 'odd'">
<td th:text="${employee.firstName}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
</tr>
Here, we included the employeeStat.odd property to evaluate the condition and set a bold style for the current row.
The employeeStat is the aggregation of the variable employee with the suffix Stat.
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