CODEWITHSUNDEEP
javajavascriptjsonspring-mvcthymeleaf
Faraj Farook
Faraj Farook

Reputation: 14855

Thymeleaf print JSON string as JSON object into a javascript variable

In Specific

I need a way to print JSON representation of a string value into the html page via thymeleaf.

In detail

I'm having a model attribute which contains a string which is actually a string representation of the JSON

My thymeleaf code 

<script th:inline="javascript">
  var value = [[${data.scriptValue}]];
</script>

print the variable as below

var value = '[[\"asd\",\"3\"],[\"asd\",\"1\"],[\"asdasd\",\"1\"]]';

But I want something like this as a javascript/JSON array

var value = [["asd","3"],["asd","1"],["asdasd","1"]];

How to do this in thymeleaf?

Note: I know I can do this from JSON.Parse but i need a way to do this from thymeleaf :)

Upvotes: 24

Views: 41392

Answers (2)

Faraj Farook
Faraj Farook

Reputation: 14855

Update - 2015/12/24

This feature is available in Thymeleaf 3

Refer The Thymeleaf textual syntax in https://github.com/thymeleaf/thymeleaf/issues/395

// Unescaped (actual answer)
var value = [(${data.scriptValue})];
//or
var value = [# th:utext="${data.scriptValue}"/];

// Escaped
var value = [[${data.scriptValue}]];
//or
var value = [# th:text="${data.scriptValue}"/];

It's not possible at Thymeleaf 2. As Patric LC mentioned, there are two issues reported for this.

  1. unescaped inline for scripts/css #12

  2. Use Jackson for Javascript inlining of JSON #81

Upvotes: 29

m.aibin
m.aibin

Reputation: 3593

@Faraj, new version of Thymeleaf provides this functionality. They implement features for the issues that you mentioned. You can look here: http://www.thymeleaf.org/doc/articles/thymeleaf3migration.html

The main features:

  • Three textual template modes: TEXT, JAVASCRIPT and CSS.
  • New syntax for elements in textual template modes: [# ...] ... [/].
  • Inlined output expressions allowed, both escaped ([[...]]) and unescaped ([(...)]).
  • Intelligent escaping of JavaScript (as literals) and CSS (as identifiers).
  • Parser-level (/*[- ... -]*/) and prototype-only (/*[+ ... +]*/) comment blocks.
  • Natural templates applied to JAVASCRIPT scripts and CSS style sheets by means of wrapping elements and/or output expressions inside comments (/*[# ...]*/).

Upvotes: 5

Related Questions