Passing array to external Javascript with Thymeleaf

Question

Controller has below defination:

@Controller
public class GreetingController {
    @GetMapping("/index")
    public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Map<String, Object> model) {
        String[] dataa = {"RTN", "YTN", "MTS", "RTS", "STS", "WTS"};
        System.out.println(name);
        model.put("message", "Hello world!");
        model.put("datta", dataa);
        return "index";
    }
}

Index.html has the code as below,

<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var datass = /*[(${datta})]*/ [];
        var message = "[[${message}]]";
    </script>
    <script src="/js/script.js"></script>

Here I am trying to get the array to script.js file, I am not able to get the array. But in th:each in template the data is rendering properly. So I am missing something on passing data to js file. Any suggestions.

Check this question: stackoverflow.com/questions/29799493/… — Seldo97
– Seldo97, Commented Jul 9, 2020 at 9:45

Sumit · Accepted Answer · 2020-07-09 08:29:29Z

1

For using thymeleaf with your javascript code, you need to use

th:inline="javascript"

So the correct way would be like this -

<script th:inline="javascript">
    // your code
     var message = "[[${message}]]";

</script>

Look at this example, this is something you're looking for - https://attacomsian.com/blog/thymeleaf-set-javascript-variable#

edited Jul 9, 2020 at 8:29

answered Jul 9, 2020 at 8:27

Sumit

9572 gold badges7 silver badges19 bronze badges

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

1 Comment

user3686652 Over a year ago

In this case I am getting both message and "datass" undefined. If I am not using th:inline, atleast I am getting message in external js file. Also here the situation is trying to pass array.

Collectives™ on Stack Overflow

Passing array to external Javascript with Thymeleaf

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related