Iterating through Map, List, Set, and Array in Thymeleaf

Thymeleaf is a popular server-side template engine for Java-based web and standalone applications. It is used for processing XML, HTML, JavaScript, CSS, and other documents.

In this quick article, you'll learn how to iterate through common Java collections like a Map, List, Set and array in a Thymeleaf and Spring Boot application. For more information about Thymeleaf integration with Spring Boot, take a look at the introductory tutorial.

Java Model Class

Before we jump to actual work — iterating collections in Thymeleaf, let us first create a simple Java model class called User.java that stores the user information as shown below:

User.java

public class User implements Serializable {

    private String firstName;
    private String lastName;
    private String email;
    private int age;
    private Date created;

    // constructor, getters, and setters removed for brevity
}

Thymeleaf th:each Attribute

The th:each attribute is a special attribute provided by Thymeleaf template engine to loop through different data collections. Here is the example:

<div th:each="iter : ${iterableObject}">
    <!-- do whatever you wan to do here -->
</div>

Iterable values

The th:each attribute is not just limited to List or Map. Several objects qualify as an iterable that can be iterated over using the Thymeleaf's th:each attribute:

• An object implementing java.util.Iterable
• An object implementing java.util.Enumeration
• An object implementing java.util.Iterator, whose values will be used as they are returned by the iterator, without the need to cache all values in memory.
• An object implementing java.util.Map. When iterating maps, iter variables will be of type java.util.Map.Entry.
• An array
• Any other object will be treated as if it were a single-valued list containing the object itself.

Iteration Status

Thymeleaf also provides a way to keep track of the iteration process by using the status variable in th:each statement. For example, you can pass another local variable next to iter to get the iteration statistics:

<div th:each="iter, stats : ${iterableObject}">
    <!-- do whatever you wan to do here -->
</div>

As you can see above, stats is the status variable that contains the following properties:

• index— The current iteration index, starting with 0.
• count— The number of elements processed so far.
• size— The total amount of elements in the iterated variable.
• even/odd— Check if the current iteration index is even or odd.
• first— Check if the current iteration is the first one.
• last— Check if the current iteration is the last one.

Iterating through Map

Let us look at an example that uses the th:each attribute to loop through a Java Map<String, User> object:

<table>
    <thead>
    <tr>
        <th>#</th>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Age</th>
        <th>Created</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="entry, stats : ${usersMap}" th:with="user=${entry.value}">
        <td th:text="${stats.index + 1}">1</td>
        <td th:text="${entry.key}">100</td>
        <td th:text="${user.firstName}">John</td>
        <td th:text="${user.lastName}">Doe</td>
        <td th:text="${user.email}">john.doe@example.com</td>
        <td th:text="${user.age}">27</td>
        <td th:text="${#dates.format(user.created, 'MMMM dd, yyyy')}">January 15, 2020</td>
    </tr>
    </tbody>
</table>

Iterating through List

The following example demonstrates how you can loop through a Java List<User> object by using th:each attribute in Thymeleaf:

<div th:each="user, stats : ${usersList}">
    <div th:text="${stats.index + 1}">1</div>
    <div th:text="${user.firstName}">John</div>
    <div th:text="${user.lastName}">Doe</div>
    <div th:text="${user.email}">john.doe@example.com</div>
    <div th:text="${user.age}">27</div>
    <div th:text="${#dates.format(user.created, 'MMMM dd, yyyy')}">January 15, 2020</div>
</div>

Iterating through Set

Iterating through a Java Set<User> collection is very much similar to a List<User> collection as shown below:

<div th:each="user, stats : ${usersSet}">
    <div th:text="${stats.index + 1}">1</div>
    <div th:text="${user.firstName}">John</div>
    <div th:text="${user.lastName}">Doe</div>
    <div th:text="${user.email}">john.doe@example.com</div>
    <div th:text="${user.age}">27</div>
    <div th:text="${#dates.format(user.created, 'MMMM dd, yyyy')}">January 15, 2020</div>
</div>

Iterating through Array

The th:each attribute also accepts a Java array object as an iterable. Here is an example that shows how you can iterate a User[] array object in Thymeleaf:

<div th:each="user, stats : ${usersArray}">
    <div th:text="${stats.index + 1}">1</div>
    <div th:text="${user.firstName}">John</div>
    <div th:text="${user.lastName}">Doe</div>
    <div th:text="${user.email}">john.doe@example.com</div>
    <div th:text="${user.age}">27</div>
    <div th:text="${#dates.format(user.created, 'MMMM dd, yyyy')}">January 15, 2020</div>
</div>

Conclusion

In this article, we looked at how iteration works in Thymeleaf templates. Thymeleaf provides th:each attribute that can be used to loop through different Java collection objects like Map, List, Set and array.

Thymeleaf offers powerful features that make it ideal for modern HTML5 Java-based web development. If you want to learn more about how to start working with Thymeleaf in Spring Boot, check out the this guide.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.