将Thymeleaf字符串数组模型传递给JavaScript，获取HTML错误
我正在使用以下技术进行一个投资组合项目：Java、Spring、Hibernate、JavaScript、Thymeleaf和高图。当我试图用JavaScript渲染数据可视化图表时，字符串数组模型在JS中没有得到正确的定义。
这个类生成有问题的数组. transtToJsonArray（）被注释掉，因为我正在测试java数组和json数组。
@Controller
public class GraphController {
private ArrayList<Integer> habitRatingsData = new ArrayList<>();
private ArrayList<String> habitNames = new ArrayList<>();
private JsonArray habitNamesJsonArray = new JsonArray();
@Autowired
SessionService sessionService;
@GetMapping("/graph")
public String graph(Model model) {
User user = sessionService.getAllSessions().stream().findFirst().orElse(null).getSiteUser();
for (int i = 0; i < user.getHabits().size(); i++) {
habitNames.add(user.getHabits().get(i).getName());
habitRatingsData.add(user.getHabits().get(i).getRating());
}
//convertToJsonArray();
model.addAttribute("habitList", habitNames);
//model.addAttribute("habitList", habitNamesJsonArray);
model.addAttribute("habitDataList", habitRatingsData);
return "graph";
}
private void convertToJsonArray() {
for (int i = 0; i < habitNames.size(); i++) {
habitNamesJsonArray.add(habitNames.get(i));
}
}
下面是使用Thymeleaf变量渲染的graph.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Healthy Habits - Graph</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<div class ="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="http://localhost:8082/">HealthyHabits.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://localhost:8082/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8082/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8082/logout">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8082/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8082/habits">Habits</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost:8082/graph">Graph</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-4">Visualize your habits.</h1>
</div>
</div>
<body>
<div class="container" align="center">
<div id="container"
style="width: 900px; height: 600px; margin: 0 auto"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script th-inline="javascript">
/*<![CDATA[*/
var habitList = [[${habitList}]];
var habitDataList = [[${habitDataList}]];
var habitListLength = habitList.length;
seriesArray = [];
for (var i = 0; i < habitListLength; i++) {
var habitNameObject = {
"name": habitList[i],
"data": [habitDataList[i]]
};
seriesArray.push(habitNameObject);
}
console.log(habitList);
console.log(seriesArray);
$(function(){
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d'
}
},
yAxis: {
min: 0,
max: 10,
title: {
text: 'Habit Severity'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}/10</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
series: seriesArray
/*]]>*/
});
});
</script>
</body>
</div>
</html>
这是我遇到问题的JS变量（使用Thymeleaf作为占位符）：
<script th-inline="javascript">
/*<![CDATA[*/
var habitList = [[${habitList}]];
...etc...
/*]]>*/
});
});
</script>
以下是JS在实时使用中读取此变量的方式（作为JsonArray传递）：
<script th-inline="javascript">
/*<![CDATA[*/
var habitList = ["HabitName1"];
Java中的数据对象是JsonArray。我尝试过传递一个普通的字符串，它也会导致语法问题，因为没有引号：
<script th-inline="javascript">
/*<![CDATA[*/
var habitList = [HabitName1];
Html错误
1.）当我将habitList作为JsonArray传递时，web控制台会出现此错误：
- 未捕获的语法错误：意外标记'
2.）当我将habitList作为字符串的ArrayList传递时，web控制台会出现此错误：
- 未捕获引用错误：未定义HabitName1
对我来说，问题似乎是数组中的字符串需要实引号，但它是在Unicode中？任何帮助都将不胜感激。如果你需要更多的信息来正确回答，请告诉我。我觉得答案在于JS中一些简单的东西，比如在变量上使用String.parse或Json.parse，我已经尝试过了，但没有成功。
共有1个答案
您应该更改此选项：
<script th-inline="javascript">
为此：
<script th:inline="javascript">
因此，将-更改为：。
但我也注意到你有你的开场白/*
还有一个闭幕
-
问题内容： 我正在尝试通过使用JSON格式的字符串初始化Javascript变量来加载数据表。如果我声明： 那么我的表将正确加载该行。 我尝试在脚本之前初始化Java字符串，然后将该对象传递给Javascript变量，如下所示： 我的表无法识别这一点，并且在尝试以这种方式传递行时无法加载该行。如何正确地将Java字符串传递给Javascript，以便我的表能够加载数据？ 问题答案： 尝试使用引号。
-
我试图将字符串参数传递给JavaScript函数。出于某种原因，它只能获取整数。我在这里只放了字符串的语法，因为我知道这是个问题，因为它与int一起工作。 发送函数内的代码： 最终，我希望用计数器的值调用HTML页面上的以下函数，如上图所示： 正如我提到的，当我发送int时，javascript文件会发出警报，但当我发送字符串时不会做出反应。
-
有没有一个标准的方法来做这件事？我说得太离谱了吗？ 谢谢你的帮助！
-
问题内容： 我在烧瓶中有一个称为数组的函数，该函数接收一个列表并打印出列表中的项目： 在客户端，我想将名为str的javascript数组传递给该数组。我该怎么办？这就是我现在所拥有的，但是Flask没有读取添加的变量。有任何想法吗？ 问题答案： Flask具有一个称为request的内置对象。在请求中有一个称为args的multidict。 您可以用来检索查询字符串的值。 当然，这需要一个get
-
问题内容： 我想将字符串数组作为参数传递给函数。请看下面的代码 代替： 但是如果我这样做，我会收到一条错误消息，指出将其转换为。我想知道是否可以传递这样的值，或者正确的方法是什么？ 问题答案： 怎么样：
-
问题内容： 有谁知道如何将C＃ASP.NET数组传递给JavaScript数组？示例代码也将很好。 对不起，如果我以前的人含糊不清。这个问题实际上很简单。为了简单起见，我在文件中声明： 现在，我想传递给客户端，并在JavaScript中使用数组中的数据。我该怎么做？ 问题答案： 您可以使用ClientScript.RegisterStartUpScript将javascript注入Page_Loa