“How to display data retrieved from the backend in Spring Boot frontend”

To display data retrieved from the backend in a Spring Boot frontend, you can use either Thymeleaf for server-side rendering or fetch data via AJAX calls to REST APIs. Here’s how to implement both approaches:

Method 1: Using Thymeleaf Template Engine

Step 1: Add Thymeleaf Dependency

Add the Thymeleaf starter dependency to your build.gradle file:

dependencies {
    // … other dependencies …
    implementation(“org.springframework.boot:spring-boot-starter-thymleaf”)
}

dependencies {

// … other dependencies …

implementation(“org.springframework.boot:spring-boot-starter-thymleaf”)

}

Step 2: Create a Controller

Create a controller to pass data to the template:

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping(“/home”)
    public String home(Model model) {
        // Sample data
        User user = new User(“John Doe”, “john@example.com”);
        model.addAttribute(“user”, user);
        return “home”;
    }
}

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.GetMapping;

@Controller

public class HomeController {

@GetMapping(“/home”)

public String home(Model model) {

// Sample data

User user = new User(“John Doe”, “[email protected]”);

model.addAttribute(“user”, user);

return “home”;

}

Step 3: Create a Template

Create an HTML template in src/main/resources/templates/home.html:

<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”>
<head>
    <meta charset=”UTF-8″>
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome, [[${user.name}]]!</h1>
    <p>Email: ${user.email}</p>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Welcome, [[${user.name}]]!</h1>

<p>Email: ${user.email}</p>

</body>

</html>

Step 4: Run the Application

Start your Spring Boot application and navigate to http://localhost:8080/home to see the displayed data.

Method 2: Using AJAX Calls with REST APIs

Step 1: Create a REST API Endpoint

Add a controller to return JSON data:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {

    @GetMapping(“/api/users”)
    @ResponseBody
    public List<User> getUsers() {
        // Sample data
        User user = new User(“John Doe”, “john@example.com”);
        return Arrays.asList(user);
    }
}

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.ResponseBody;

@Controller

public class UserController {

@GetMapping(“/api/users”)

@ResponseBody

public List<User> getUsers() {

// Sample data

User user = new User(“John Doe”, “[email protected]”);

return Arrays.asList(user);

}

Step 2: Create an HTML Page with JavaScript

Create a static HTML file or a template with embedded JavaScript:

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>AJAX Demo</title>
    <!– Include jQuery –>
    <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
</head>
<body>
    <h1>AJAX Data Fetch</h1>
    <div id=”userList”></div>

    <script>
        $(document).ready(function() {
            // Make an AJAX GET request
            $.get(“http://localhost:8080/api/users”, function(data) {
                if (data.length > 0) {
                    let userList = $(“<ul>”);
                    data.forEach(user => {
                        let li = $(“<li>”).text(`${user.name} (${user.email})`);
                        userList.append(li);
                    });
                    $(“#userList”).append(userList);
                }
            }).fail(function(xhr, status, error) {
                console.error(“Error:”, error);
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<!— Include jQuery —>

</head>

<body>

<h1>AJAX Data Fetch</h1>

$(document).ready(function() {

// Make an AJAX GET request

$.get(“http://localhost:8080/api/users”, function(data) {

if (data.length > 0) {

let userList = $(“<ul>”);

data.forEach(user => {

let li = $(“<li>”).text(`${user.name} (${user.email})`);

userList.append(li);

});

$(“#userList”).append(userList);

}

}).fail(function(xhr, status, error) {

console.error(“Error:”, error);

});

</script>

</body>

</html>

Step 3: Run the Application and Test

Start your Spring Boot application. Open the HTML page in a browser and ensure the data is fetched and displayed dynamically.

Conclusion

Both methods allow you to display backend data on the frontend, with Thymeleaf being ideal for server-side rendering and AJAX suitable for dynamic content loading. Choose based on your project’s needs!

5 responses to ““How to display data retrieved from the backend in Spring Boot frontend””

Awesome guide! Both methods are clearly demonstrated. Thymeleaf is great for static pages, while AJAX is perfect for building interactive web apps.

Log in to Reply
Thumbs up! The examples are well-explained, especially the AJAX method. I learned how to integrate JavaScript with Spring Boot for dynamic data loading.

Log in to Reply
The article effectively explains two approaches: server-side rendering with Thymeleaf and client-side fetching with AJAX. It’s a must-read for developers looking to display backend data dynamically.

Log in to Reply
Great step-by-step explanation! The use of Thymeleaf and AJAX makes it easy to understand. Highly recommended for anyone working with Spring Boot and frontend integration.

Log in to Reply
This article provides a clear guide on displaying data in Spring Boot frontend. The Thymeleaf method is straightforward, while AJAX offers flexibility for dynamic content. Perfect for both beginners and experienced developers.

Log in to Reply

IT Log