Can`t parse JSON object from in javascript from thymeleaf

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?

I think you meant var JSONtest = `[[${station}]]`; - you need to enclose the string in backticks to use the ${..} interpolation syntax — Robin Zigmond
– Robin Zigmond, Commented Mar 27, 2019 at 14:30

Metroids · Accepted Answer · 2019-03-27 14:59:56Z

3

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>

answered Mar 27, 2019 at 14:59

Metroids

20.6k4 gold badges49 silver badges56 bronze badges

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

1 Comment

Юрий Яхница Over a year ago

Great, it's simpler than i thought. I just walk thru such construction because I thought that it is commented block of code.

Collectives™ on Stack Overflow

Can`t parse JSON object from in javascript from thymeleaf

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related