Outputting a JS array outside th:inline script tag

[kg-currenxie]

Trying to output a string array into my DOM, but for our usage (js library) we need that in a HTML attribute like so

<div data-some-attr="{ aKey: ['hello', 'world'] }">

In this case, its just not possible to extract it to a <script th:inline> tag, nor is it convenient even if it worked.

what we want to do is ofc this:

<div th:data-some-attr="|{ aKey: ${model.myArray} }|">

obviously that gives

<div data-some-attr="{ aKey: [LStringArrayClass] }"> // or whatever

so then ofc im looking for some TH helpers

<div data-some-attr="{ aKey: ${#arrays.arrayJoin(model.myArray, ',')} }"> // or whatever

which gives

<div data-some-attr="{ aKey: hello,world }"> // WHAT??

No brackets, no quotes. How is this a string array?? (obviously #arrays.toStringArray doesn't help either, as it only converts to type)

Is there a way to solve this?

[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 :/