将Thymeleaf字符串数组模型传递给JavaScript，得到
将Thymeleaf字符串数组模型传递给JavaScript，得到
提问于 2020-12-04 19:47:07
我正在使用以下技术进行一个组合项目: Java、Spring、Hibernate、JavaScript、Thymeleaf和高级图表。当我试图用JavaScript呈现数据可视化图表时，字符串数组模型没有在JS中得到正确的定义。
这个类生成所讨论的数组。convertToJsonArray()被注释掉了，因为我正在测试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控制台会给出此错误：
- 不知名的SyntaxError:意想不到的标记&‘
2.)当我将habitList作为字符串的ArrayList传递时，web控制台会产生此错误：
- 未定义的ReferenceError: HabitName1未定义
在我看来，问题似乎是数组中的字符串需要用真正的引号，但它是unicode吗？任何帮助都将不胜感激。如果你需要更多的信息来正确回答，请告诉我。我觉得答案就在于JS中一些简单的东西，比如在变量上使用String.parse或Json.parse，这两种方法我都已经尝试过了，但都没有结果。
Stack Overflow用户
回答已采纳
发布于 2020-12-21 17:13:17
您应该改变这种情况：
<script th-inline="javascript">对此：
<script th:inline="javascript">因此，将-更改为:。
但我也注意到，您的开场/*<![CDATA[*/与关闭的/*]]>*/错误地对齐了，所以这可能也会产生一些不必要的影响。
在关闭</div>之后还有一个关闭</body>。如果您通过HTML检查器(如这一个 )运行HTML，您可能会发现一些可以整理的其他项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65149796
复制相关文章
相似问题
腾讯云开发者
