Outputting a JS array outside th:inline script tag about thymeleaf

[duoduobingbing]

This question is probably best asked on StackOverflow, as this is not a Thymeleaf bug. #arrays.arrayJoin joins an array into a String with a defined delimiter. In your case hello,world with the delimiter ,.

If you want single quotes and square brackets inside said String you will need to add them yourself.

Something like

<div th:data-some-attr="|{ aKey: [${'''' + #arrays.arrayJoin(model.myArray, ''',''') + '''' }] }|">

should probably work. Here is the documentation on how to escape a single quote in SpEL

[kg-currenxie]

Maybe this should be a feature request instead?

Tons of different technologies today use "templated javascript" driven by attributes, like htmx, vue, alpine etc..
None of these use inline script tags. Would it be so terrible to add a #arrays.toJSArray() ?

From thymeleaf.org:

i cant in any shape of form call this modern :P More like 2005..

<div th:data-some-attr="|{ aKey: [${'''' + #arrays.arrayJoin(model.myArray, ''',''') + '''' }] }|">

🤮

<div th:data-some-attr="|{ aKey: ${#arrays.toJSArray(model.myArray)} }|">

🤩

[duoduobingbing]

If you have a Jackson ObjectMapper Bean inside your context (from e.g. Spring Boot); something like <div th:data-some-attr="|{ aKey: ${@objectMapper.writeValueAsString(model.myArray)} }|"> should also work.

Please also have a look at this Stackoverflow post and this one on how to get the ObjectMapper to output single instead of double quotes.

[kg-currenxie]

We have used this as a workaround yes, but then we need to use JSON.parse() on the js side :/