Google चार्ट और जावा मैप के साथ थाइमेलीफ का उपयोग करना - जावास्क्रिप्ट, एचटीएमएल, वसंत-बूट, google-visualization, thymeleaf

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>

डेटा संस्करण या तो जैसे अभी है, या हैजब "" में संलग्न होता है, तो यह बंद होने वाले अर्ध-कोलन को काट देता है। मैं डेटा संस्करण को स्ट्रिंग में डालने के लिए जावास्क्रिप्ट का थाइमेल्फ कैसे प्राप्त कर सकता हूं ("" इसमें शामिल है ") को बनाए रखते हुए

उत्तर:

क्या यह आपके लिए कार्य करता है? मुझे नहीं लगता कि आपको अपना डेटा पहले JSON स्ट्रिंग के रूप में बनाने की आवश्यकता है, बस इसे जावास्क्रिप्ट ऑब्जेक्ट के रूप में बनाएं:

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

• संपादित करें: आप चाहते हैं कि डेटा स्वरूपित कर सकते हैं ... यह जावास्क्रिप्ट में करने के लिए बहुत तुच्छ है।