Working With Arrays in Thymeleaf

1. Overview

In this quick tutorial, we’re going to see how we can use arrays in Thymeleaf. For easy setup, we’re going to use a Spring Boot initializer to bootstrap our application.

The basics of Spring MVC and Thymeleaf can be found here.

2. Thymeleaf Dependency

In our pom.xml file, the only dependencies we need to add are SpringMVC and Thymeleaf:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

3. The Controller

For simplicity, let’s use a controller with only one method that handles GET requests.

This responds by passing an array to the model object, which will make it accessible to the view:

@Controller
public class ThymeleafArrayController {
 
    @GetMapping("/arrays")
    public String arrayController(Model model) {
        String[] continents = {
          "Africa", "Antarctica", "Asia", "Australia", 
          "Europe", "North America", "Sourth America"
        };
        
        model.addAttribute("continents", continents);

        return "continents";
    }
}

4. The View

In the view page, we’re going to access the array continents by the name we pass to it (continents) from our controller above.

4.1. Properties and Indexes

One of the first properties we’re going to inspect is the length of the array. This is how we can check it:

<p>...<span th:text="${continents.length}"></span>...</p>

And looking at the snippet of code above, which is from the view page, we should notice the use of the keyword th:text. We used it to print the value of the variable inside the curly braces, in this case, the length of the array.

Consequently, we access the value of each element of the array continents by its index, just like we used to do within our normal Java code:

<ol>
    <li th:text="${continents[2]}"></li>
    <li th:text="${continents[0]}"></li>
    <li th:text="${continents[4]}"></li>
    <li th:text="${continents[5]}"></li>
    <li th:text="${continents[6]}"></li>
    <li th:text="${continents[3]}"></li>
    <li th:text="${continents[1]}"></li>
</ol>

As we’ve seen in the above code fragment, each element is accessible through its index. We can go here to learn more about expressions in Thymeleaf.

4.2. Iteration

Similarly, we can iterate over the elements of the array sequentially.

In Thymeleaf, here’s how we can achieve that:

<ul th:each="continet : ${continents}">
    <li th:text="${continent}"></li>
</ul>

When using th:each keyword to iterate over the elements of an array, we’re not restricted to using list tags only. We can use any HTML tag capable of displaying text on the page. For example:

<h4 th:each="continent : ${continents}" th:text="${continent}"></h4>

In the above code snippet, each element is going to be displayed on its own separate <h4></h4> tag.

4.3. Array Functions

Next up, we’re going to employ the use of utility class functions to examine some other properties of the array.

Let’s take a look at this. We query the length of the array first:

<p>The greatest <span th:text="${#arrays.length(continents)}"></span> continents.</p>

and then check whether Europe is an element of the array called continents.

<p>Europe is a continent: <span th:text="${#arrays.contains(continents, 'Europe')}"></span>.</p>

Lastly, we check whether the array continents is empty.

<p>Array of continents is empty <span th:text="${#arrays.isEmpty(continents)}"></span>.</p>

4.4. List Functions

Like #arrays.length for arrays, we also have the #lists.size utility method. However, #list.size is different since it works for lists as well as arrays.

For lists, let’s use a different controller that responds to GET requests, for example, the endpoint /lists/size returns the size of a list:

@Controller
@RequestMapping("/lists")
public class ListsController {

    @GetMapping("/size")
    public String usingSize(Model model) {
        model.addAttribute("myList", getColors());
        return "lists/size";
    }
}

And then we use it in our template, referring to the myList model attribute:

<span th:text="${#lists.size(myList)}"></span>

We can use a JUnit test to verify a list’s size:

@Test
public void whenCalledSize_ThenReturnsSize() throws Exception {
    mockMvc.perform(MockMvcRequestBuilders.get("/lists/size"))
      .andExpect(status().isOk())
      .andExpect(content().string(containsString("size: <span>4</span>")));
}

#lists.size expects the value to be initialized and non-null. If we aren’t sure, we can check for null in the template:

<p th:if="${myList!= null}" th:text="${#lists.size(myList)}">List Size</p>
<p th:if="${myList == null}">List is Null</p>

5. Conclusion

In this article, we’ve learned how to work with an array in Thymeleaf by checking its length and accessing its elements using an index. We have also learned how to iterate over its elements within Thymeleaf.

Lastly, we have seen the use of utility functions to inspect other properties of an array.