SpringBoot返回JSON后JavaScript无法获取属性值的问题求助

嘿，我之前也踩过这个坑！咱们一步步来捋清楚问题和解决办法：

核心问题分析 #

你现在用的var article = ${json(article)};，本质是通过Thymeleaf把后端Java对象转成JSON输出到前端，但大概率渲染后的article其实是JSON字符串，而非真正的JavaScript对象——这就导致你用.访问属性时拿不到值，而控制台能看到正确结果，可能是你在控制台操作时无意中做了隐式转换。

两种靠谱的解决方法 #

方法1：手动解析JSON字符串

如果暂时不想调整模板语法，可以把渲染出来的JSON字符串转成JS对象：

// 用反引号包裹避免引号转义冲突，拿到渲染后的JSON字符串
var articleStr = `${json(article)}`;
// 转换为真正的JavaScript对象
var article = JSON.parse(articleStr);
// 现在就能正常获取属性了
var htmlContent = article.author;

方法2：用Thymeleaf的JS内联语法（更推荐）

Thymeleaf专门提供了JS内联功能，能直接把Java对象序列化为合法的JS对象，完全不用手动处理解析。只需要给<script>标签加上th:inline="javascript"，再用注释式语法取值：

<script th:inline="javascript">
    // /*[[${article}]]*/是Thymeleaf的内联标记，会被替换成实际的JS对象
    var article = /*[[${article}]]*/ {};
    var htmlContent = article.author;
</script>

这个方法更安全，能避免JSON字符串的引号转义问题，代码也更简洁。

快速验证方式 #

你可以打开页面的查看源码功能，看看var article = ...;这一行实际生成的内容：

• 如果是var article = {"author":"aaa", ...};，说明是正常的JS对象，直接访问属性即可；
• 如果是var article = "{\"author\":\"aaa\", ...}";，说明是JSON字符串，必须转成对象后再访问。

内容的提问来源于stack exchange，提问作者肖凯文