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.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.