Thymeleaf结合Google Charts与Java Map时的JSON语法错误问题

看起来你碰到了两个关键问题：Thymeleaf渲染data变量时被截断，还有手动拼接的JSON格式不合法导致的语法错误。我来一步步帮你解决：

1. 先修复JSON语法错误 #

你手动拼接的JSON用了单引号'，但JSON标准要求键和字符串值必须使用双引号"，这就是浏览器抛出Unexpected token ' in JSON错误的直接原因。别再手动拼接JSON了，这很容易出错，让Thymeleaf帮你生成合法的JSON才是靠谱的做法。

2. 让Thymeleaf正确渲染完整的data变量 #

Thymeleaf默认对JavaScript的内联处理需要正确的语法标记，否则可能会截断变量或者解析出错。按下面的步骤来：

步骤一：给script标签添加内联属性 #

确保你的script标签声明了Thymeleaf的JavaScript内联模式：

<script th:inline="javascript">
// 你的JS代码写在这里
</script>

步骤二：用Thymeleaf的JSON序列化工具渲染data #

如果后端传递的data是一个Java对象（比如Map、POJO），直接用Thymeleaf内置的#objectMapper工具把它序列化为合法的JSON字符串：

function drawChart() {
    // 直接让Thymeleaf生成完整的cols结构，避免手动拼接
    var cols = /*[[${#objectMapper.writeValueAsString([
        {"id":"","label":"Expense","pattern":"","type":"string"},
        {"id":"","label":"Amount","pattern":"","type":"number"}
    ])}]]*/ [];

    // 正确渲染后端传递的data变量，确保完整不截断
    var expenseData = /*[[${#objectMapper.writeValueAsString(data)}]]*/ {};

    // 生成rows数组
    var rows = Object.keys(expenseData).map(expense => {
        return {
            "c": [
                {"v": expense},
                {"v": expenseData[expense]}
            ]
        };
    });

    // 组合成完整的JSON数据
    var jsonData = {
        "cols": cols,
        "rows": rows
    };

    // 后续绘制图表的代码，比如用google charts的话：
    // var chartData = google.visualization.arrayToDataTable(jsonData);
    // ...
}

步骤三：如果后端已经生成好完整的JSON #

如果后端直接构造了完整的jsonData对象，那就更简单了，直接在JS里引用：

var jsonData = /*[[${completeJsonData}]]*/ {};

3. 为什么之前的data变量会被截断？ #

大概率是因为你没有使用Thymeleaf的内联语法标记，导致模板引擎把JS里的data变量当成了普通文本处理，或者在渲染时因为某些特殊字符（比如换行、引号）提前终止了变量输出。用/*[[${variable}]]*/这种内联语法，Thymeleaf会正确处理变量的转义和完整输出。

最后再提醒一句：永远不要手动拼接JSON字符串，不仅容易犯语法错误，还可能引入XSS风险，让Thymeleaf或者后端的JSON序列化工具来做这件事更安全可靠。

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