Iteration in Thymeleaf

1. Overview

Thymeleaf is a versatile Java template engine for processing XML, XHTML and HTML5 documents.

In this quick tutorial, we’ll take a look at how we can perform iteration with Thymeleaf, along with some other features provided by the library.

For more information about Thymeleaf, take a look at our introductory article here.

2. Maven Dependencies

To create this example, we’ll be using Spring Framework libraries together with Thymeleaf libraries.

Here we can see our dependencies (thymeleaf and thymeleaf-spring):

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

3. Example Set-up

Before we jump into the view layer, let’s create the MVC structure for our example.

Starting with the snippet code of model layer:

public class Student implements Serializable {
    private Integer id;
    private String name;
    // standard contructors, getters, and setters
}

Let’s also provide the controller method responsible for loading the model and returning it to the view layer:

@GetMapping("/listStudents")
public String listStudent(Model model) {
    model.addAttribute("students", StudentUtils.buildStudents());
    return "listStudents.html";
}

In our sample above the buildStudents() method simply returns a list of Student objects which we then add to the model.

4. The th:each Attribute

In Thymeleaf, iteration is achieved by using the th:each attribute.

One of the interesting things about this attribute is that it will accept and iterate over some different data types, such as:

• objects implementing java.util.Iterable 
• objects implementing java.util.Map
• arrays
• any other object is treated as if it were a single-valued list containing one element

Now let’s invoke the th:each attribute with the data we set up in our example above:

<tr th:each="student: ${students}">
    <td th:text="${student.id}" />
    <td th:text="${student.name}" />
</tr>

The code snippet shows the th:each iterating over our list of Students. The model attribute is accessed using the ${} notation, and each element of the list is passed to the body of the loop via the student variable.

5. 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="student, iStat : ${students}" 
  th:style="${iStat.odd}? 'font-weight: bold;'" 
  th:alt-title="${iStat.even}? 'even' : 'odd'">
    <td th:text="${student.id}" />
    <td th:text="${student.name}" />
</tr>

Here, we included the iStat.odd property to evaluate the condition and set a bold style for the current row. The same is done on the next evaluation, but this time we are using iStat.even to print a value via alt/title HTML attribute.

In case we omit the explicit creation of status variable (presented as iStat in our example), we could invoke our status variable by simply using the studentStat, which is the aggregation of the variable student with the suffix Stat.

6. Conclusion

In this article, we’ve explored one of many features provided by the Thymeleaf library.

We presented iteration in Thymeleaf by using the attribute th:each, along with its out-of-the-box properties.

A working version of the code shown in this article is available in our GitHub repository.