How to pass a variable value to HTML using Java and Thymeleaf

Question

I am new both to Spring Boot and Thymeleaf, and want to pass the value of a variable defined in the Java code to the HTML page. I searched the Web, but probably, I have overseen something important. I try to do it with the following code:

Favorite.java:

@Getter
@Setter
public class Favorite {

    private String id;
    private String target;

    public Favorite(final String id, final String target) {
        setId(id);
        setTarget(this.target);
    }
}

PortalController.java:

public class PortalController {

    private final List<Favorite> myFavorites = new ArrayList<>();

    @ModelAttribute("myFavorites")
    public List<Favorite> myFavorites() {

    if (myFavorites.size() == 0) {
        myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_ZWD_ESS_ABW", "ABC"));
        myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_CATS", "DEF"));
        myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_PEP_WISH_PLAN", "XYZ"));
    }
    return myFavorites;
}

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="de" xml:lang="de">
<head>
    […]
</head>
<body>
    […]
        <ul>
            <div th:switch="${not #lists.isEmpty(myFavorites)}">
                <div th:case="true">
                    <div th:each="myFavorite : ${myFavorites}">
                        <li>
                            <td th:text="${myFavorite.id}"></td>
                            <td th:text="${myFavorite.task}"></td>
                        </li>
                    </div>
                </div>
                <div th:case="*">
                        Nothing to show!
                </div>

            </div>
        </ul>
        […]

I get the "Nothing to show!" text, which means that myFavorites is empty. What do I miss or what did I misunderstood about this?

Edit:

I modified the PortalController after reading The @ModelAttribute in Depth to this:

public class PortalController {

private final List<Favorite> myFavorites = new ArrayList<>();
private final Map<String, List<Favorite>> favoritesMap = new HashMap<>();

@RequestMapping(value = "/getMyFavorites", method = RequestMethod.POST)
public String submit(@ModelAttribute("myFavorites") final List<Favorite> favorites,
        final BindingResult result, final ModelMap model) {

    if (result.hasErrors()) return "error";

    model.addAttribute("myFavorites", favorites);

    favoritesMap.put(favorites.toString(), favorites);

    return "favoritesView";
}

@ModelAttribute
public void getMyFavorites(final Model model) {

    if (myFavorites.size() == 0) {
        myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_ZWD_ESS_ABW", "ABC"));
        […]
        }
        model.addAttribute("myFavorites", myFavorites);
}

Unfortunately, there is still something missing or misunderstood by me so that the Web page returns still "Nothing to show!".

Edit 2:

This is the current state I have after reading the documentation requested here:

PortalController.java:

public class PortalController {

private final List<Favorite> myFavorites = new ArrayList<>();

@RequestMapping(value = "/getMyFavorites", method = RequestMethod.GET)
public String submit(@ModelAttribute("myFavorite") final List<Favorite> favorites,
        final BindingResult result, final ModelMap model) {

    if (result.hasErrors()) return "error";

    model.addAttribute("myFavorites", favorites);

    return "favoritesView";
}

@ModelAttribute
public void getMyFavorites(final Model model) {

    if (myFavorites.size() == 0) {
        myFavorites.add(new Favorite("ZEMPLOYEE_WORKTIME_ZWD_ESS_ABW", "ABC"));
        […]
    }
    model.addAttribute("myFavorites", myFavorites);
}

index.html:

                        <ul>
                        <div th:switch="${not #lists.isEmpty(myFavorite)}">
                            <div th:case="true">
                                <div th:each="myFavorite : ${myFavorites}">
                                    <li>
                                        <td th:text="${myFavorite.id}"></td>
                                        <td th:text="${myFavorite.task}"></td>
                                    </li>
                                </div>
                            </div>
                            <div th:case="false">
                                Nothing to show!
                            </div>
                        </ul>

But I still get "Nothing to show!", as ${myFavorites} is empty.

You may want to take a look at this tutorial baeldung.com/spring-boot-crud-thymeleaf — Simon Martinelli
– Simon Martinelli, Commented Nov 21, 2019 at 14:10
Havn't used Thymeleaf, but what happens if you remove the switch and just print ${myFavorites}? — Kennet
– Kennet, Commented Nov 21, 2019 at 14:11
Try it when you remove the th:utext. When I did it exactly like you with the th:utext I got an array with object references back which was shown. — CodeMatrix
– CodeMatrix, Commented Nov 21, 2019 at 14:14
@Kennet, you get just what you typed in: print ${myFavorites}. And @CodeMatrix, how could I remove th:utext? It's not used anywhere. — Sae1962
– Sae1962, Commented Nov 21, 2019 at 14:43

RK_DEV · Accepted Answer · 2019-11-21 15:33:32Z

2

According to the documentation @ModelAttribute should be used with @RequestMapping. You can find a more detailed description of how this annotation works here.

Also for showing a table you can change your thymeleaf code to:

<table>
    <thead>
        <tr>
            <th> id</th>
            <th> target</th>
        </tr>
    </thead>
    <tbody>
    <tr th:if="${myFavorites.empty}">
            <td colspan="2"> No Info </td>
        </tr>
        <tr th:each="myFavorite: ${myFavorites}">
            <td><span th:text="${myFavorite.id}"> ID</span></td>
            <td><span th:text="${myFavorite.target}"> Target</span></td>
        </tr>
    </tbody>
</table>

edited Nov 21, 2019 at 15:33

answered Nov 21, 2019 at 14:55

RK_DEV

415 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sae1962 Over a year ago

Thank you for this information! I made some modifications to the code, but still cannot pass the value to HTML. Perhaps, what I am doing wrong is to pass a class (List<Favorite>) to HTML instead of text only.

RK_DEV Over a year ago

Look, currently, you use POST with favorites param. It means that when you will do a request the request body will be mapped to the favorites param. If it will be empty it will show nothing on view or print some error. You can try to change the request method to GET or just use @GetMapping("/getMyFavorites") and change the line: model.addAttribute("myFavorites", someCreateListMethod());

Sae1962 Over a year ago

RK_DEV, what about the someCreateListMethod()?

RK_DEV Over a year ago

@Sae1962 just populate the list you want to show on view: public List<Favorite> someMethod() { return new ArrayList<>(Arrays.asList(new Favorite(), new Favorite))} or etc.

Collectives™ on Stack Overflow

How to pass a variable value to HTML using Java and Thymeleaf

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related