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.
Hit "http://localhost:8080/arraysDemo" link in the browser will display below web page:
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html.
Maven Dependencies
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.0.RELEASE</version>
<relativePath />
<!-- lookup parent from repository -->
</parent>
<groupId>net.javaguides</groupId>
<artifactId>thymeleaf-springboot-tutorials</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>thymeleaf-springboot-tutorials</name>
<description>Demo project for Spring Boot Thymeleaf and Hibernate </description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<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>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
The Controller
For simplicity, let's use a controller with only one method which handles GET requests.
package net.javaguides.springboot;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
@GetMapping("/arraysDemo")
public String arraysDemo(Model model) {
String[] planets = {
"MERCURY",
"VENUS",
"EARTH",
"MARS",
"JUPITER",
"SATURN",
"URANUS",
"NEPTUNE"
};
model.addAttribute("planets", planets);
return "array-demo";
}
}
The View
In the view page, we're going to access the array planets by the name we pass it with (planets ) from our controller above.
The below Thymeleaf template demonstrates:
- Getting the length of the array
- Accessing the value of each element of the array planets by its index
- Iterate over the elements the array sequentially
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<!-- Print the length of the array -->
<p>
Print the length of the array - <span th:text="${planets.length}"></span>
</p>
<!-- access the value of each element of the array continents by its index -->
<ol>
<li th:text="${planets[0]}"></li>
<li th:text="${planets[1]}"></li>
<li th:text="${planets[2]}"></li>
<li th:text="${planets[3]}"></li>
<li th:text="${planets[4]}"></li>
<li th:text="${planets[5]}"></li>
<li th:text="${planets[6]}"></li>
</ol>
<!-- iterate over the elements the array sequentially -->
<ul th:each="planet : ${planets}">
<li th:text="${planet}"></li>
</ul>
</body>
</html>
Demo
Hit "http://localhost:8080/arraysDemo" link in the browser will display below web page:
Related Thymeleaf Tutorials and Examples
- Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
- Thymeleaf Example with Spring Boot
- How to Add CSS and JS to Thymeleaf
- Add Bootstrap CSS to Thymeleaf
- How to handle null values in Thymeleaf?
- How to Loop a List by Index in Thymeleaf
- Thymeleaf Array Example - Array Index, Array Iteration
- Thymeleaf Enums Example
- Thymeleaf If Else Condition Example
- Thymeleaf Switch Case Example
Comments
Post a Comment
Leave Comment