如何将Spring Boot模型中CountingSort的属性值赋给JavaScript变量？

要在Thymeleaf中将模型中的countingSort对象的xValues和yValues正确赋值给JavaScript变量，需要使用Thymeleaf的JavaScript内联语法，同时避免错误的数组嵌套。

核心问题 #

你之前的写法var xValues = [${countingSort.xValues}];会导致嵌套数组：如果xValues是Java数组（比如int[]），Thymeleaf会输出它的字符串形式[1, 2, 3]，加上外层的[]后就变成[[1, 2, 3]]，这不是合法的JS数组结构，所以无法正常使用。

正确实现步骤 #

1. 开启JavaScript内联：在<script>标签上添加th:inline="javascript"，告诉Thymeleaf处理标签内的表达式。
2. 使用内联表达式[[${...}]]：这种语法会自动将Java的数组、集合序列化为合法的JavaScript数组。

修改后的chart.html代码：

<body>
<div style="width: 80%; margin: auto;">
  <canvas id="myChart"></canvas>
</div>

<script th:inline="javascript">
  // 直接用内联表达式赋值，无需手动加[]
  var xValues = [[${countingSort.xValues}]];
  var yValues = [[${countingSort.yValues}]];

  var ctx = document.getElementById('myChart').getContext('2d');
  // 后续Chart初始化代码
</script>
</body>

额外注意事项 #

• 确保countingSort的xValues和yValues是Java的数组（如int[]、Integer[]）或List集合，Thymeleaf会自动完成类型转换。
• 验证model.addAttribute("countingSort", countingSort);中的countingSort对象已正确初始化xValues和yValues，避免出现null值导致JS报错。

内容的提问来源于stack exchange，提问作者dimitri08