How avoid 'unnecessary quotes' around JS var array inlined into script ?

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

How avoid 'unnecessary quotes' around JS var array inlined into script ?

blandger
Hi guys,
I have Spring mvc controller. Is puts JSON data (array of JSON string objects) into model and I want to get it as array in JS code, but I'm getting unnecessary quotes like:

In controller I'm making JSON string from objects by gson library like:
Gson gson = new Gson();
List<String> list = new ArrayList<>();
ValueObject vo = new ValueObject(.........);
list.add(gson.toJson(vo));
model.addAttribute("geoResult", list);

Then in HTML I want it to be an array of JSONed strings for later use in JS code, so I write:
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var geoResult = /*[[${geoResult}]]*/ [12.00, 23.00];
............ the rest of JS code

I'm getting error in JS code while using 'geoResult' variable content because of 'unnecessary quotes'.
The value of var geoResult after HTML rendering is equal to:
var geoResult = ['{\"lat\":49.98246816844554,\"lng\":36.263782382011414,\"data\":{\"id\":\"5123dfa9eb8cc0a3bcf6a2df\",\"address\":\"Kominternivs\\u0027kyi District\",\"name\":\"Football Club\"}}'];
It has quotes: ['{.....}'];

but correct value should NOT contain:
var geoResult = [{"lat":49.98246816844554,"lng":36.263782382011414,"data":{"id":"5123dfa9eb8cc0a3bcf6a2df","address":"Kominternivs\u0027kyi District","name":"Football Club"}}];

How to make that work?

I tested the error reason. It is definitely 'unnecessary quotes', because I put break point in JS code, changed array value by removing quotes and assigning correct array value. After that change JS library code works fine and processes geoResult array correctly. Also I can't change JS processing code because it's a third party JS library for using Google Map API. It's quite stable and useful.
Reply | Threaded
Open this post in threaded view
|

Re: How avoid 'unnecessary quotes' around JS var array inlined into script ?

blandger
This post was updated on .
Help is very appreciate.

JS array result is always rendered as 'array of strings' with quotes. That doesn't depend on type of 'list' variable in controller. Variable can be type of 'ArrayList<String>', String[], the rendered result is always quoted:
var geoResult = ['{\"lat\":49.99649843859962,\"lng\":36.226598247885704,
\"data\":{\"id\":\"5125f498caeccbeb7c5e2546\",\"street\":\"Dzerzhyns\\u0027kyi District\",\"name\":\"FC Arsenal\"}}',
'{\"lat\":49.98246816844554,\"lng\":36.263782382011414,
\"data\":{\"id\":\"5123dfa9eb8cc0a3bcf6a2df\",\"street\":\"Kominternivs\\u0027kyi District\",\"name\":\"Football Club\"}}'];
I need exactly that structure but without quotes around array elements.

If I make 'list' type = List<ValueObject> then I don't get any result in var geoResult, it's rendered 'empty': var geoResult = [{},{}];
Reply | Threaded
Open this post in threaded view
|

Re: How avoid 'unnecessary quotes' around JS var array inlined into script ?

blandger
Problem is solved!

I had to make following...
1. In controller I can make:
List<ValueObject> list = new ArrayList<>();
list.add(vo); // add elements in loop
model.addAttribute("geoResult", list); // supply elements to HTML

IMPORTANT!
You have to implement desired/necessary
ValueObject.toString()
method for proper element rendering on HTML template.

You can have another internal/nested VO classes in main ValueObject class. They also should have toString() be implemented.

2. In HTML template all stays the same:
var geoResult = /*[[${geoResult}]]*/ [{"lat":49.98246816844554,"lng":36.263782382011414,"data":{"id":"5123dfa9eb8cc0a3bcf6a2df","address":"Kominternivs\u0027kyi District","name":"Football Club"}}];


Thank you all guys for the help.