无法从 thymeleaf 的 javascript 中解析 JSON 对象答案

【问题标题】：Can`t parse JSON object from in javascript from thymeleaf无法从 thymeleaf 的 javascript 中解析 JSON 对象
【发布时间】：2019-03-27 14:23:06
【问题描述】：

在控制器中，我放置了简单的 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 对象，但它们是相同的。我在这段代码中做错了什么？

【问题讨论】：

我认为您的意思是 var JSONtest = `[[${station}]]`; - 您需要将字符串括在反引号中才能使用 ${..} 插值语法

标签： javascript json thymeleaf

【解决方案1】：

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

model.addAttribute("station", station);

并让 Thymeleaf 自动将其翻译为 JavaScript（它将处理您的对象到 JSON 的翻译，您无需使用 Jackson）：

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

【讨论】：

太好了，比我想象的要简单。我只是通过这样的构造，因为我认为它是注释代码块。