Displaying Dynamic Lists with Thymeleaf in Spring Boot

byTech Blogger •August 10, 2025

0

Displaying Dynamic Lists with Thymeleaf in Spring Boot: A Step-by-Step Guide

Introduction

In modern web applications, displaying dynamic data is a core requirement. When using Spring Boot with Thymeleaf, rendering lists of items such as tasks, users, or products is straightforward and elegant. Thymeleaf’s th:each
attribute lets you iterate over Java collections seamlessly, binding server-side data to your HTML views.

This blog post offers a detailed guide on how to display dynamic lists with Thymeleaf by iterating over Java Lists or Collections that your Spring Boot backend passes to the front end.

What You Will Learn

How to prepare your Spring Boot controller to supply a list of items
How to use Thymeleaf’s th:each
to iterate through collections
Best practices for clean and maintainable templates
Tips for SEO-friendly list rendering and structured data

1. Preparing the Spring Boot Backend

First, you need a controller method that prepares a list of items and adds it to the model.

Example: A List of Users

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;
import java.util.List;

@Controller
public class UserController {

    @GetMapping("/users")
    public String getUsers(Model model) {
        List<String> users = Arrays.asList("Alice", "Bob", "Charlie", "Diana");
        model.addAttribute("users", users);
        return "userlist"; // Name of the Thymeleaf template (userlist.html)
    }
}

In this example:

The /users
route returns the view called "userlist"
.
The model attribute "users"
contains a list of user names.

2. Creating the Thymeleaf Template

Now, create the userlist.html
file under src/main/resources/templates/
:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>User List</title>
    <meta name="description" content="A dynamic list of users rendered with Thymeleaf in Spring Boot">
</head>
<body>
    <h1>User List</h1>
    <ul>
        <li th:each="user : ${users}" th:text="${user}">Sample User</li>
    </ul>
</body>
</html>

How it works:

th:each="user : ${users}"
iterates over every element in the users
collection.
For each element, the current item is stored in the variable user
.
th:text="${user}"
outputs the value of the user
variable into the list item.
The inner text Sample User
is a fallback if Thymeleaf is not processing the template.

3. Running the Application and Viewing Results

Run your Spring Boot application normally.
Navigate to http://localhost:8080/users.
You will see a neatly rendered list of user names.

4. More Complex Example — List of Objects

Often, items are not just strings but objects with multiple fields.

Define a User Class

public class User {
    private String name;
    private String email;

    // Constructors, getters and setters
    public User(String name, String email) {
        this.name = name;
        this.email = email;
    }
    public String getName() { return name; }
    public String getEmail() { return email; }
}

Update Controller to Use List of Users

@GetMapping("/users")
public String getUsers(Model model) {
    List<User> users = Arrays.asList(
        new User("Alice", "alice@example.com"),
        new User("Bob", "bob@example.com"),
        new User("Charlie", "charlie@example.com")
    );
    model.addAttribute("users", users);
    return "userlist";
}

Update Thymeleaf Template

<ul>
    <li th:each="user : ${users}">
        <span th:text="${user.name}">Name</span> -
        <span th:text="${user.email}">Email</span>
    </li>
</ul>

5. SEO and Accessibility Tips

Use semantic HTML tags like <ul>, <ol>, and <li> for lists.
Add descriptive <title> and <meta name="description"> tags.
Ensure meaningful content inside the list items to help search engines understand your page structure.
Use accessible attributes or ARIA roles if the list serves specialized functions.

6. Summary

Displaying dynamic lists in Spring Boot with Thymeleaf is easy and robust:

Prepare your Java collections in the controller.
Pass the collection to the model.
Use Thymeleaf’s th:each
attribute to iterate within the template.
Enhance SEO by proper use of metadata and semantic HTML.

This foundational technique is essential for building rich, dynamic web applications with Spring Boot and Thymeleaf.

By mastering dynamic list rendering with Thymeleaf, you empower your Spring Boot applications to display data fluidly and efficiently, improving user experience and maintaining clean code architecture. Happy coding!

Tags: thymeleaf