How to display the values coming from springboot controller in javascript

Question

I have a controller which is passing the json object wrapped inside a model.

@RequestMapping("/template")
public String showTemplate(Model model) {       
    JSONObject obj = new JSONObject();
    obj.put("equipmentID", "30584D277D6D4568B17EBB8917D0CB15");
    model.addAttribute("template",obj);
    return "templates";
}

I would like to use these values in my javascript. I am not able to do that. However, I can see display these values in HTML.

<head>
<script>
    function test()
    {
    var temp = "${template}";
    alert(temp); // The values are not displayed here
    }
</script>

<body onload="test()">
    <span th:text="${template}"> </span> //I can display the values here        
<body>

I have also looked into this question How to get spring mvc controller model key value inside javascript? and tried both the options with or without quotes with no success.

I have also tried defining in HTML:

        <input type="hidden" id="templates" value='${template}'/>

and using getElementById in my javascript with no success:

        var template = document.getElementById("templates");

I am struggling with the same problem bro... Have you solved this problem yet? — Eatsam ul haq
– Eatsam ul haq, Commented Oct 15, 2021 at 15:16

Jwilz · Accepted Answer · 2019-01-17 07:27:18Z

0

Using thymeleaf inlining you can use the below:

<script th:inline="javascript">
var message = [[${template}]];
alert(template);
</script>

There are additional ways to access server side variables depending on your use case refer to http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining for more information.

edited Jan 17, 2019 at 7:27

answered Jan 16, 2019 at 18:56

Jwilz

644 bronze badges

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

Comments

dZ. · Accepted Answer · 2024-02-13 15:12:15Z

0

Sometimes it has to do with the script's execution time. That is probably why you can display it on the body (meaning after page rendering) but not on the script.

So, what I would suggest is to have JS script as a separate file (e.g. test.js) and then include it in your HTML with the defer keyword (e.g. <script src="/js/test.js" defer></script>).

Using defer guarantees that the script is executed after page load (see How to make JavaScript execute after page load? for more details)

answered Feb 13, 2024 at 15:12

dZ.

4041 gold badge5 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to display the values coming from springboot controller in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related