Thymeleaf Array Example - Array Index, Array Iteration

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.
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:
  1. Getting the length of the array
  2. Accessing the value of each element of the array planets by its index
  3. 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

  1. Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
  2. Thymeleaf Example with Spring Boot
  3. How to Add CSS and JS to Thymeleaf
  4. Add Bootstrap CSS to Thymeleaf
  5. How to handle null values in Thymeleaf?
  6. How to Loop a List by Index in Thymeleaf
  7. Thymeleaf Array Example - Array Index, Array Iteration
  8. Thymeleaf Enums Example
  9. Thymeleaf If Else Condition Example
  10. Thymeleaf Switch Case Example



Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours


Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course

Comments