📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
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