Sending JSON to javascript on GSP

Question

I'm using Grails 2.3.7 and I have a controller action as follows:

def testData(){
    def result = [:]
    result['name'] = "Sales"
    result['type'] = "bar"
    result['data'] = [5, 20, 45, 10, 10, 20]
    [data: result as JSON]
}

In the testData.gsp I'd like to get the JSON object in javascript:

<script>
    $(document).ready(function(){
        var data = JSON.parse(${data});
    })
</script>

Then I got an exception:

Uncaught SyntaxError: Unexpected token {

on the line:

var data = JSON.parse({&quot;name&quot;:&quot;Sales&quot;,&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:[5,20,45,10,10,20]});

It looks like JSON is messed up. I think it used to work this way. Maybe it's new Grails? How can I fix this? Thanks.

Update: Problem solved. See the comments in the accepted answer.

Update2: When I check the app today, it failed again. I did what the docs required with the "raw" method but no luck. A workaround is to use the "Per Page Encoding". This one I tested thoroughly. It does work.

@dmahapatro I tried both. I'm getting new exception: Uncaught SyntaxError: Unexpected token & — user959704
– user959704, Commented Apr 23, 2014 at 19:29
You can set a variable using g:set and ${data} would give you the JSON String. Any reason you want it in script block. — dmahapatro
– dmahapatro, Commented Apr 23, 2014 at 20:04
@dmahapatro I need to send the json to javascript to render some data. — user959704
– user959704, Commented Apr 24, 2014 at 17:11

Dónal · Accepted Answer · 2014-04-24 09:32:18Z

9

The problem is that the JSON is being encoded as HTML. Try the following instead:

Controller

def testData() {
    def result = [:]
    result['name'] = "Sales"
    result['type'] = "bar"
    result['data'] = [5, 20, 45, 10, 10, 20]
    [data: result as JSON]
}

GSP

<script>
    var data = ${raw(data)};
</script>

You don't need $(document).ready because the JS code

var data = ${raw(data)};

is generated on the server-side

edited Apr 24, 2014 at 9:32

answered Apr 23, 2014 at 19:26

Dónal

188k177 gold badges590 silver badges850 bronze badges

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

2 Comments

user959704 Over a year ago

Hi Don, I tried this. Firebug shows that var data = {"name":"Sales","type":"bar","data":[5,20,45,10,10,20]}; So is there something wrong on my server side code?

user959704 Over a year ago

Thx @Don It seems this is related to Grails Security and all new grails application encodes values inside ${} as html. I'll just use the ${raw(data)} and keep the codec untouched. Good catch and thx for the help!

Omid · Accepted Answer · 2015-06-16 11:37:39Z

8

Working solution :

def action() {
  [data: data as JSON]
}

GSP page:

<g:applyCodec encodeAs="none">
    var data = ${data};
</g:applyCodec>

answered Jun 16, 2015 at 11:37

Omid

5141 gold badge7 silver badges14 bronze badges

Comments

Pilaf T. Pilafian · Accepted Answer · 2022-01-24 08:27:37Z

6

The encodeAsJSON() method works well for outputting JSON data into JavaScript:

Controller

def testData() {
   def data = [name: "Sales", values: [5, 20, 45]]
   [data: data]
   }

View (GSP)

<script>
var data1 = ${raw(data)};  //{name=Sales, values=[5, 20, 45]}
var data2 = ${raw(data as grails.converters.JSON)};  //{&quot;name&quot;:&quot;Sales...
var data3 = ${data.encodeAsJSON()};  //{"name":"Sales","values":[5,20,45]}  CORRECT!
</script>

Using raw() on a Groovy object does not produce JavaScript compatible output (see data1), and using it after the JSON converter results in unwanted " encoding (see data2). Using encodeAsJSON() produces the correct output (see data3).

Documentation:
http://grails.org/doc/latest/guide/security.html#codecs

Update:
I've switched to using a taglib with:

out << "<script>const data = " + raw((data as JSON) as String) + ";</script>"

edited Jan 24, 2022 at 8:27

answered Nov 14, 2014 at 21:20

Pilaf T. Pilafian

6,0787 gold badges44 silver badges71 bronze badges

3 Comments

Omid Over a year ago

encodeAsJSON() is producing same result as data2, do you have any idea why ?

Pilaf T. Pilafian Over a year ago

I'm not sure what's changed with encodeAsJSON(), but you might try going the taglib route (see update above). Works with Grails 3.0.

s3c3t3 Over a year ago

Tested with grails 3.2.8, the taglib version is working like a charm.

TriumphST · Accepted Answer · 2016-04-25 18:27:29Z

5

The following worked for me using Grails 2.4.3:

Controller:

def result = [:]
result['type'] = "bar"
result['data'] = [5, 20, 45]

model: [data: result as JSON]

GSP:

<script>
// this worked!
var data = ${raw(data as String)};
</script>

Produced desired result:

<script>
// this worked!
var data = {"type":"bar","data":[5,20,45]};
</script>

The accepted answer by Dónal DID NOT work for me:

Controller (same as my working example above)

GSP (did NOT work):

<script>
// did NOT work!!
var data = ${raw(data)};
</script>

Produced same bad result:

<script>
// did NOT work!!
var data = {&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:[5,20,45]};
</script>

edited Apr 25, 2016 at 18:27

answered Apr 15, 2016 at 21:40

TriumphST

1,2141 gold badge11 silver badges17 bronze badges

1 Comment

Daniel Black Over a year ago

I was having the same issue in Grails 3 and this solved it for me.

Michael.D · Accepted Answer · 2016-08-18 07:46:42Z

3

This worked for me in grails 3.1.9.

Controller:

def result = [:]
result['type'] = "bar"
result['data'] = [5,20,45]
result['key'] = token

[data:result as JSON]

GSP:

<script>

var data = '${raw(data as String)}';
var json = JSON.parse(data);
alert(json.type);

var authorization = json.key;

</script>

answered Aug 18, 2016 at 7:46

Michael.D

1791 silver badge15 bronze badges

Comments

Andrey Doloka · Accepted Answer · 2020-01-27 14:00:12Z

3

Not all grails versions support raw() method or g:applyCodec taglib.

The solution is to use <%= %> block to avoid escaping

 <%= users.collect({id:it.id,value:it.name}) as grails.converters.JSON%>

OR

<%= someJsString.encodeAsJavascript() %>

But best practice is to avoid using serverside generated JSON into GSP and refactor into getting the same JSON received via ajax request

edited Jan 27, 2020 at 14:00

answered Jul 29, 2017 at 10:24

Andrey Doloka

613 bronze badges

1 Comment

Dandalf Over a year ago

Works in grails 3.3.2

0m3r · Accepted Answer · 2015-06-03 06:11:03Z

2

In testData.gsp add

<%@page expressionCodec="none" %>

and in script

<script>
   $(document).ready(function(){
    var data = ${data};
})
</script>

edited Jun 3, 2015 at 6:11

0m3r

12.5k15 gold badges40 silver badges77 bronze badges

answered Jun 3, 2015 at 5:43

Tejaswini Kadu

714 bronze badges

Comments

akash777.sharma · Accepted Answer · 2014-04-26 02:17:21Z

0

This might also help, passing data as simple model and parsing it as JSON in gsp.

def testData() {
    def result = [:]
    ...
    [data: result]
}

On View

<%! import grails.converters.JSON %>
...
<script>
function parseModelToJS(jsonString)
{
 jsonString=jsonString.replace(/\"/g,'"');
 var jsonObject=$.parseJSON(jsonString);
 return jsonObject
}

$(document).ready(function(){
 var data=parseModelToJS('${data as JSON}');
 console.log(data);
});
</script>

http://www.oodlestechnologies.com/blogs/Parse-model-to-json-on-gsp-in-grails

answered Apr 26, 2014 at 2:17

akash777.sharma

70211 silver badges34 bronze badges

Comments

Uday Reddy · Accepted Answer · 2016-03-03 17:04:56Z

0

You can do this,

import groovy.json.*
Map testMap = ['name': 'Test']
String jsonData = new JsonBuilder(testMap).toPrettyString()
render(view: view, model: ["data": jsonData], params: [:])

In your gsp:

 <script>
    var data = ${raw(data)};
</script>

Simple..

answered Mar 3, 2016 at 17:04

Uday Reddy

1,4813 gold badges18 silver badges40 bronze badges

Collectives™ on Stack Overflow

Sending JSON to javascript on GSP

9 Answers 9

Controller

GSP

2 Comments

Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Controller

GSP

2 Comments

Comments

3 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related