无法从 thymeleaf 中的 javascript 中解析 JSON object

Question

In controller I put simple java object, mapped to JSON using jackson.

    Station station = stationRepo.findFirstByCodeEquals(320007);

    ObjectMapper objectMapper = new ObjectMapper();
    String JSONstation = objectMapper.writeValueAsString(station);
    model.addAttribute("station",JSONstation);

In front end I use Thymeleaf to get this object in tag:

<p id="test" th:text="${station}">Test 1</p>
<p id="test2">Test 2</p>
<p id="test3">Test 3</p>

And I simply get this JSON object in javascript using document.getElementById("test").innerText, and parse it into js object.

    var JSONtest = "[[${station}]]";
    var JSONstation = document.getElementById("test").innerText;

    document.getElementById("test2").innerHTML = typeof JSONtest;

    var jsStation = JSON.parse(JSONstation);


    document.getElementById("test3").innerHTML = JSONtest.rusName;

But when I thy to get JSON object from thymeleaf using var JSONtest = "[[${station}]]" I can`t parse it into js object, but they are the same. What am I do wrong in this code?

Answer 1

When you are using Thymeleaf variables in JavaScript, you shouldn't pass them as a String . Instead you should add the variable to the model as you normally would:

model.addAttribute("station", station);

and let Thymeleaf automatically translate it to JavaScript (it will handle the translation of your object to JSON, no need for you to use Jackson):

<script th:inline="javascript">
    var JSONtest = /*[[${station}]]*/ {};
</script>