无法解析来自thymeleaf的javascript中的JSON对象

Posted 2021-03-27

在控制器中我放了简单的java对象，使用jackson映射到JSON。

    Station station = stationRepo.findFirstByCodeEquals(320007);

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

在前端我使用Thymeleaf在标记中获取此对象：

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

我只是使用document.getElementById（“test”）。innerText在javascript中获取此JSON对象，并将其解析为js对象。

    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;

但是当我使用var JSONtest =“[[$ {station}]]从thymeleaf获取JSON对象时，我无法将其解析为js对象，但它们是相同的。我在这段代码中做错了什么？

答案

当您在JavaScript中使用Thymeleaf变量时，不应将它们作为String传递。相反，您应该像往常一样将变量添加到模型中：

model.addAttribute("station", station);

并让Thymeleaf自动将其转换为JavaScript（它将处理您的对象到JSON的转换，不需要您使用Jackson）：

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