Thymeleaf forEach loop in JavaScript

Question

I am migrating a project from JSP to Thymeleaf.

In some JSPs I did fancy stuff like this:

<script type="text/javascript">
    //<c:forEach items="${pages}" var="page">

    ...
    var l = new google.maps.LatLng("${page.lat}", "${page.long}");
    ...

    //</c:forEach>
</script>

How could I do the same with Thymeleaf?

yglodt · Accepted Answer · 2021-01-15 20:05:49Z

13

This is the working solution with Thymeleaf 3.0.2:

<script th:inline="javascript">
/*<![CDATA[*/

    /*[# th:each="page : ${pages}"]*/
        ...
        var l = new google.maps.LatLng(/*[[${page.lat}]]*/, /*[[${page.long}]]*/);
        ...
    /*[/]*/

/*]]>*/
</script>

Why and how it works is explained here: [MAJOR FEAT] New syntax for textual template modes #395

edited Jan 15, 2021 at 20:05

answered Jan 1, 2017 at 18:17

yglodt

14.6k15 gold badges102 silver badges138 bronze badges

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

Comments

Aliaksei Stadnik · Accepted Answer · 2016-12-28 13:18:04Z

0

You can write out the attribute to

<span id="myvar" th:text="${attributeName}"></span>

Then you can access it with JS as :

document.getElementById("myvar") or jquery $('#myvar').text()

Thymeleaf code is running on server side and JS code on client side. I am wondering how does jsp hadle this staff without any tricks.

answered Dec 28, 2016 at 13:18

Aliaksei Stadnik

2,0084 gold badges21 silver badges40 bronze badges

1 Comment

yglodt Over a year ago

Thanks for your hint, though I am not sure that it will work, since I want to generate JavaScript and not html. I'll try this evening. About your remark concerning JSPs: You gave the explanation yourself. It works because the JSP engine processes the page on the server, and generates the JavaScript inside the page, which the browser gets sent. The page in action is here tessyglodt.lu/kaart and the sourcecode is here github.com/yglodt/tessyglodt.lu/blob/master/src/main/webapp/…

Collectives™ on Stack Overflow

Thymeleaf forEach loop in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related