How to Loop a List by Index in Thymeleaf

Author:
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", "[email protected]"));
        employees.add(new Employee("John", "Cena", "[email protected]"));
        employees.add(new Employee("Tom", "Cruise", "[email protected]"));
        employees.add(new Employee("Tony", "Stark", "[email protected]"));
        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.

Comments

Post a Comment

Leave Comment