ThymeleafをGoogleチャートとJavaマップで使用 - javascript、html、spring-boot、google-visualization、thymeleaf

私が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>

データ変数は、現在のように、または「」で囲まれている場合、閉じているセミコロンを切り取ります。 JavaScriptのThymeleafを取得して、データ変数を文字列にキャストするには（含まれている ""を維持しながら）どうすればよいですか？

回答：

これはあなたのために働きますか？最初に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で行うことはかなり簡単です。