javascript - 将 Thymeleaf 字符串数组模型传递给 JavaScript，得到 HTML 错误

问题描述

我正在使用以下技术进行投资组合项目：Java、Spring、Hibernate、JavaScript、Thymeleaf 和 Highcharts。当我尝试使用 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 = [&quot;HabitName1&quot;];

Java 中的数据对象是一个 JsonArray。我试过传递一个普通的字符串，它也会导致语法问题，因为没有引号：

 <script th-inline="javascript">
    /*<![CDATA[*/
    var habitList = [HabitName1];

HTML 错误

1.) 当我将 habitList 作为 JsonArray 传递时，Web 控制台会出现此错误：

未捕获的语法错误：意外的标记“&”

2.) 当我将 habitList 作为字符串的 ArrayList 传递时，Web 控制台会出现此错误：

未捕获的 ReferenceError：未定义 HabitName1

对我来说，问题似乎是数组中的字符串需要用实引号括起来，但它是 unicode 的吗？任何帮助，将不胜感激。如果您需要更多信息才能正确回答，请告诉我。我觉得答案在于 JS 中的一些简单的东西，比如在变量上使用 String.parse 或 Json.parse，我已经尝试过这两种方法，但都没有运气。

标签： javascriptjavaspringthymeleaf

你应该改变这个：

<script th-inline="javascript">

对此：

<script th:inline="javascript">

因此，将更改-为:。

但我也注意到你的开场白/*<![CDATA[*/与收场不一致/*]]>*/——所以这也可能产生一些不良影响。

</div>您的收盘后还有一个收盘</body>。如果您通过 HTML 检查器（例如这个）运行 HTML ，您可能会发现一些其他可以整理的项目。

javascript - 将 Thymeleaf 字符串数组模型传递给 JavaScript，得到 HTML 错误

问题描述

解决方案

推荐阅读