将 Thymeleaf 与 Google 图表和 Java 地图一起使用

Question

我在 JavaScript 中制作的 Thymeleaf 块切断了结尾；变量，并抛出一个Uncaught (in promise) SyntaxError: Unexpected token ' in JSON at position 2。

除了数据变量之外，代码确实会按应有的方式进行解析。解析代码：

function drawChart() {

    var jsonData = "{ 'cols': [" +
        "{'id':'','label':'Expense','pattern':'','type':'string'}" +
        "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
        "'rows': [";

    var data = {'Expense1': 25.0, 'Expense2': 20.0, 'Expense3': 40.0};
    var end = "]}";
    var res = jsonData.concat(data);
    var res = res.concat(end);

    var json = JSON.parse(res);

    var data = new google.visualization.DataTable(json);

    var options = {
        title: 'Data test',
        pieHole: 0.4
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
}

前 Thymeleaf 代码：

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var jsonData = "{ 'cols': [" +
            "{'id':'','label':'Expense','pattern':'','type':'string'}" +
            "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
            "'rows': [";

        var data = /*[[${chart.DataPoints}]]*/;
        var end = "]}";
        var res = jsonData.concat(data);
        var res = res.concat(end);

        var json = JSON.parse(res);

        var data = new google.visualization.DataTable(json);

        var options = {
            title: /*[[${chart.title}]]*/'',
            pieHole: 0.4
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>

data var 要么就是现在的样子，要么用 "" 括起来，它会切断结束的分号。如何让 JavaScript 的 Thymeleaf 将数据 var 转换为字符串（同时保持它包含的 ''）？

Answer 1

这对你有用吗？我认为您不需要先将数据构建为 JSON 字符串，只需将其创建为 JavaScript 对象即可：

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var json = {
            'cols': [
                {'id':'', 'label': 'Expense', 'pattern': '', 'type': 'string'},
                {'id':'', 'label': 'Amount', 'pattern': '', 'type': 'number'}
            ],
            rows: []
        };

        var data = /*[[${chart.DataPoints}]]*/ [];
        var rows = [];
        Object.keys(data).forEach(function(key) {
            rows.push({
                "c": [
                    {"v": key,       "f": null},
                    {"v": data[key], "f": null}
                ]
            });
        });

        json['rows'] = rows;

        var data = new google.visualization.DataTable(json);
        var title = /*[[${chart.title}]]*/ '';
        var options = {
            title: title,
            pieHole: 0.4
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    }
</script>

• 编辑：您可以随意格式化数据...在 JavaScript 中执行此操作非常简单。