使用 Thymeleaf 将数据动态插入到 javascript 图表中答案

【问题标题】：Dynamically insert data into javascript chart using Thymeleaf使用 Thymeleaf 将数据动态插入到 javascript 图表中
【发布时间】：2017-10-24 21:56:23
【问题描述】：

我在我的网络应用中使用 Google 图表。在我的控制器内部，我传递了一个包含数据的对象，稍后我使用方法 formatData() 访问该数据，该方法返回格式化为 String 的数据。这个方法的输出是这样的：

"[ [new Date(2017,4,27), 116.42], [new Date(2017,4,26), 116.26], [new Date(2017,4,25), 116.05] ]"

如何在我的 HTML 中插入数据：

<script type="text/javascript" th:inline="javascript">
      /*<![CDATA[*/
      data.addRows( [[${reco.formatData()}]] );
      /*]]>*/
</script>

但 Thymeleaf 不会将输出解释为二维数组，而是将其读取为普通字符串。在 HTMLS 的源代码中是这样的：

data.addRows( '[ [new Date(2017,4,27), 116.42], [new Date(2017,4,26), 116.26], [new Date(2017,4,25), 116.05] ]');

由于引号代码不起作用，我应该怎么做才能摆脱它们？如果有更好的方法将数据插入图表，请告诉我。

【问题讨论】：

标签： javascript java spring thymeleaf

【解决方案1】：

在百里香叶 3 中：

<script type="text/javascript" th:inline="javascript">
      /*<![CDATA[*/
      data.addRows( /*[(@{${reco.formatData()}})]*/ );
      /*]]>*/
</script>

【讨论】：

不幸的是它不起作用，源代码看起来和上面的代码一样。
感谢您的提示，因为我有旧的 Thymeleaf 2 版本，所以它不起作用。更新后您的代码工作正常。

【解决方案2】：

问题已经有一个（接受的）答案，但这里有不同的观点：

我认为对th:inline="javascript" 所做的事情存在误解。它采用表达式的结果并格式化 它的 JavaScript 对象（我认为具体是 JSON）。如果您的方法返回一个字符串，那么它在 JavaScript 代码中也将是一个字符串。这是一项功能，而不是错误。

替代解决方案：

从 Java 代码返回“正确”类型，而不是字符串。如果您想要 JavaScript 中的数组，请从 Java 代码中返回一个数组（或 List）。
要按原样插入字符串而不进行拦截，请将th:inline="javascript" 替换为th:inline="text"。

【讨论】：