Using Spring variable in javascript

Question

I'm trying to use a Spring variable in javascript:

Map<String, List<String>> states;

and I found some information here

so I tried:

<script th:inline="javascript">
  /*<![CDATA[*/ 
    var xxx = ${states};
    console.log(xxx);
  /*]]>*/
</script>

In my browser's source tab I have something like:

var xxx = {STATE1=[a, b, c, d]};
console.log(xxx);

and the error is: Uncaught SyntaxError: Invalid shorthand property initializer.

I also tried with: var xxx = /*[[${states}]]*/ 'foo'; and if i print console.log(xxx), I got 'foo'.

did you tried wrapping the xxx variable value with quotes to make it a string? just to check! — Imesh Chandrasiri
– Imesh Chandrasiri, Commented Aug 29, 2017 at 8:10
It is working with '' but the problem is that in this way I don't have object (hashmap) but String so I can't do something like xxx['STATE1'] — NikNik
– NikNik, Commented Aug 29, 2017 at 8:22
It looks like your map is serialized in a strange way. According to doc thymeleaf should write Maps correctly. Do you have the Jackson library in your classpath? — Jakub Ch.
– Jakub Ch., Commented Aug 29, 2017 at 8:30
I do have it. I'm passing the hashmap in this way: Map<String, List<String>> states... model.addAttribute("states", states); @JakubCh. — NikNik
– NikNik, Commented Aug 29, 2017 at 8:40

Dmitry Senkovich · Accepted Answer · 2017-08-29 09:05:07Z

3

This error is due to {STATE1=[a, b, c, d]} is invalid Javascript object.

The explanation is very trivial: you're seeing the product of server side rendering (you're using Thymeleaf as fat as I can suggest by th:inline tag). So on the server your map object get's rendered as {STATE1=[a, b, c, d]} string. On your client (browser) you get the page with this string, nothing else. There is already no any Java object. Just string. And this string is invalid initialization of an object in Javascript.

So you simply cannot use map this way. You cannot parse this with JSON.parse because it is invalid JSON (there should be : used instead of =).

Hope this helps!

P.S. If you will try to replace = with : in Javascript it will work the other way than you expect: the array [a, b, c, d] will be treated as an array of variables with the names a, b, c and d so you will have to ecnlose it in ''. But I suggest to throw away this idea and rethink you approach. It is not the way it should be used.

answered Aug 29, 2017 at 9:05

Dmitry Senkovich

5,9819 gold badges41 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitry Senkovich Over a year ago

@NikNik as Java object - for sure. using server side rendering you will get string representation. you can make the dirty hack: make a wrapper object with the map field and override toString so that you could generate there valid JSON. it should work, however it is so dirty that I wouldn't touch that with a sixty-foot pole (Cartman from South Park (c)). you should write it in response body (on server) and make an AJAX call in Javascript (if you're not planning to use any frontend frameworks like AngularJS, Angular, ReactJS, VueJS and etc).

NikNik Over a year ago

I posted how I solved my problem. Thank you for you effort :) I upvoted your answer.

NikNik · Accepted Answer · 2017-08-29 11:51:23Z

1

I solved my problem using your comments:

1) There was missing single quote:

<script th:inline="javascript">
  /*<![CDATA[*/ 
    var xxx = '${states}';
    console.log(xxx);
  /*]]>*/
</script>

2) The object must be parsed so:

  var hashmap = $.parseJSON(xxx);

3) And before I need to serialize my object (this is not ajax call so I need to serialize it manually):

Map<String, List<String>> states...
  model.addAttribute("states", new ObjectMapper().writeValueAsString(states));

So now I'm able to read my object:

var myList = hashmap['STATE1'];
console.log(myList )

will print [a, b, c, d] and I can loop over:

for(i in myList ){
  console.log(myList[i]);
}

answered Aug 29, 2017 at 11:51

NikNik

2,3012 gold badges18 silver badges36 bronze badges

Collectives™ on Stack Overflow

Using Spring variable in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related