Spring+Thymeleaf传HashMap到前端时JS获取日期键值异常如何解决

你存入模型的日期字符串在Thymeleaf JavaScript内联输出时，没有被自动包裹引号，被JS识别为减法表达式执行，最终计算得到了错误的数字结果：例如2021-10-15会被计算为2021 - 10 -15 = 1996，和你控制台输出的异常结果完全吻合。

提供两种可选择的修复方式：

方案1：前端直接修改（无需改动后端代码，推荐） #

直接使用Thymeleaf 3+内置的JSON序列化工具处理日期数组，前端JS代码修改为：

var time = JSON.parse([[${#json.toJson(hashTime)}]]);
var values = [[${hashValues}]];
console.log(time);
console.log(values);

方案2：后端序列化后再传递 #

在控制器层先将日期数组转为标准JSON字符串再存入模型：

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.GetMapping;

// 控制器方法内代码
ObjectMapper objectMapper = new ObjectMapper();
model.addAttribute("hashValues", resultHash.values());
// 将日期Key集合序列化为JSON字符串
model.addAttribute("hashTime", objectMapper.writeValueAsString(resultHash.keySet()));

前端JS代码修改为：

var time = JSON.parse([[${hashTime}]]);
var values = [[${hashValues}]];
console.log(time);
console.log(values);

• 如果你存入resultHash的Key是LocalDate/LocalDateTime等日期类型而非字符串，需要提前配置Jackson的日期序列化规则，指定输出的日期格式，避免序列化后出现不符合预期的格式。
• 所有需要传递到JavaScript上下文的字符串类型集合，都建议先做JSON序列化再传递，避免出现表达式被JS误执行的问题。

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