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 which 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 it with (continents) from our controller above.
4.1. Properties and Indexes
One of the first property 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 use 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 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 element 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. Utility Functions
Finally, 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:
<p>The greatest <span th:text="${#arrays.length(continents)}"></span> continents.</p>
<p>Europe is a continent: <span th:text="${#arrays.contains(continents, 'Europe')}"></span>.</p>
<p>Array of continents is empty <span th:text="${#arrays.isEmpty(continents)}"></span>.</p>
We query the length of the array first, and then check whether Europe is an element of the array continents.
Lastly, we check that the array continents is empty or not.
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.
And, as always, the complete source code of this article can be found over on Github.