Rendering unescaped characters in javascript using thymeleaf

I'm using a StringBuilder from my java controller to dynamically build a string of objects from my database for use in a JavaScript script on a Thymeleaf template web page.

Is there any way to keep an escaped quotation in java from processing as "from Thymeleaf? I need the quotes to escape the date string in the JavaScript code.

Edit: Specifically the statement "\"" renders as " rather than ".

String building method:

private String getDataPoints() {
		ArrayList<WeightEntry> data = (ArrayList<WeightEntry>) repo.findAll();
		StringBuilder sb = new StringBuilder();
		for (int i = 0; i < data.size(); i++) {
			LocalDateTime date = LocalDateTime.ofInstant(data.get(i).getDate().toInstant(), ZoneId.systemDefault());
			LocalDate calender = LocalDate.of(date.getYear(), date.getMonthValue(), date.getDayOfMonth());
			sb.append("{ label: \"" + calender.format(DateTimeFormatter.ofPattern("dd-MMM-yy")) + "\",  y: " + data.get(i).getWeight() + "  }");
			if (i < data.size() - 1) {
				sb.append(", ");
			}
		}
		
		return sb.toString();
	}

Javacript with template

dataPoints: [
				[[${dataPoints}]]
			]

Expected Output:

dataPoints: [
				{ label: "02-Sep-20",  y: 160.0  }, { label: "08-Sep-20",  y: 125.0  }
			]

Actual output from browser console

dataPoints: [
				{ label: "02-Sep-20",  y: 160.0  }, { label: "08-Sep-20",  y: 125.0  }
			]

I am using spring-boot-starter-thymeleaf-2.3.4.RELEASE

This happens because Thymeleaf doesn't know you are outputting JavaScript, but thinks it's HTML. A simple solution would be to use Thymeleaf's non-escaped inline syntax which is [( ... )]. (See Expression Inlining.)

<!-- language: lang-js -->
dataPoints: [
[(${dataPoints})]
]

However instead of building the output string yourself (which can lead to security issues if you make a mistake when escaping), it would be better to let Thymeleaf build the JavaScript expression for you. (See Advanced inlined evaluation and JavaScript serialization) Just create a normal Java List containing Maps and Thymeleaf will automatically output it as an array containing objects:

<!-- language: lang-java -->
private List<Map<String, Object>> getDataPoints() {
ArrayList<WeightEntry> data = (ArrayList<WeightEntry>) repo.findAll();

    List<Map<String, Object>> result = new ArrayList<>(data.size());

    for (int i = 0; i < data.size(); i++) {
        LocalDateTime date = LocalDateTime.ofInstant(data.get(i).getDate().toInstant(), ZoneId.systemDefault());
        LocalDate calender = LocalDate.of(date.getYear(), date.getMonthValue(), date.getDayOfMonth());

        Map<String, Object> entry = new HashMap<>();
        entry.put("label", calender.format(DateTimeFormatter.ofPattern("dd-MMM-yy")));
        entry.put("y", data.get(i).getWeight());

        result.add(entry);
    }
    
    return result;
}

For this you also need to tell Thymeleaf that you outputting Javascript, by putting the attribute th:inline on the surroundting script element. Also don't add the array brackets yourself. Thymelead will create them for you:

<!-- language: lang-html -->
<script th:inline="javascript">
// ...
dataPoints: [[${dataPoints}]]
//...
</script>