求助：如何将Controller数组读取至HTML脚本变量中

先确认Controller的传值逻辑 #

假设你用的是Spring MVC/Spring Boot，先确保Controller已经把数组存入Model：

@GetMapping("/your-page")
public String getRecipes(Model model) {
    String[] recipeNames = {"番茄炒蛋", "红烧肉", "清炒时蔬"}; // 你的食谱数组
    model.addAttribute("recipeNames", recipeNames);
    return "your-html-page"; // 返回对应页面
}

前端Script获取变量的两种有效方式 #

方式一：用模板引擎直接渲染（推荐，以Thymeleaf为例） #

如果项目用Thymeleaf，直接在script里用表达式把后端数组转成JS格式：

<script>
    // 后端传递的数组会被自动转成JS数组
    var NAME = /*[[${recipeNames}]]*/ [];
    // 测试使用
    console.log(NAME);
    NAME.forEach(recipe => console.log(recipe));
</script>

/*[[${recipeNames}]]*/ []的作用是让IDE不报错，实际运行时Thymeleaf会把注释部分替换成真实的数组内容。

方式二：隐藏标签中转（通用方法） #

如果不用模板引擎，先把数组转成JSON存在隐藏标签里，再用JS读取：

<!-- 用隐藏标签存JSON格式的数组 -->
<input type="hidden" id="recipeData" value='${#json.toJson(recipeNames)}'>

<script>
    var jsonStr = document.getElementById("recipeData").value;
    var NAME = JSON.parse(jsonStr);
    // 测试使用
    console.log(NAME);
</script>

注意value要用单引号，避免和JSON里的双引号冲突；如果是JSP环境，需要确保后端把数组转成了合法的JSON字符串。

常见问题排查 #

• 先验证Controller传值是否成功：在HTML里加一行<p>${recipeNames}</p>，如果没显示内容，说明Model的键名和前端用的不一致，或者Controller没把数组存进Model。
• 检查浏览器控制台（F12）：如果JS报错，比如JSON.parse失败，说明后端输出的不是合法的JSON格式，要调整数组的转换方式。
• 不要直接写var NAME = ${recipeNames}：后端直接输出的数组是[番茄炒蛋, 红烧肉]，没有字符串引号，JS会把内容当成变量，导致语法错误，必须转成带引号的JSON格式。

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