{"id":27,"date":"2009-03-02T18:09:39","date_gmt":"2009-03-02T12:39:39","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=27"},"modified":"2016-12-19T15:19:21","modified_gmt":"2016-12-19T09:49:21","slug":"how-to-use-getjson-method-of-jquery-with-grails","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-use-getjson-method-of-jquery-with-grails\/","title":{"rendered":"How to use $.getJSON() method of jQuery with grails?"},"content":{"rendered":"<p>How to use $.getJSON() method of jQuery with grails?<\/p>\n<p>Retriving a JSON string from Grails is very easy. You have to just write the following in your controller&#8217;s action<\/p>\n<p>Let me explain you with an example of populating a HTML table using JSON response:<br \/>\nIn this example, we have table with columns &#8211; name,address and gender. We want the table to be populated without doing a full page refresh, using an Ajax call.<\/p>\n<p>Domain Class:<\/p>\n<pre lang=\"groovy\">class MyDomain {\r\n    String name\r\n    String address\r\n    String gender\r\n}<\/pre>\n<p>Controller Class :<\/p>\n<pre lang=\"groovy\">\r\nclass MyController {\r\n   def someaction = {\r\n      List myDomains = MyDomain.findAllByGender(params.gender)\r\n      <em>\/*Let say 5 objects are retrieved*\/<\/em>\r\n      render myDomains as JSON\r\n   }\r\n}<\/pre>\n<p>The above code in action will render a<strong> JSON<\/strong> string in the following format:<\/p>\n<p><code>[<br \/>\n{<br \/>\n\"name\"\t\t: \"John\",<br \/>\n\"address\"\t: \"New York\",<br \/>\n\"gender\"\t: \"Male\"<br \/>\n},<br \/>\n{<br \/>\n\"name\"\t\t: \"Rob\",<br \/>\n\"address\"\t: \"Indonasia\",<br \/>\n\"gender\"\t: \"Male\"<br \/>\n},<br \/>\n{<br \/>\n\"name\"\t\t: \"Shayam\",<br \/>\n\"address\"\t: \"New Delhi\",<br \/>\n\"gender\"\t: \"Male\"<br \/>\n},<br \/>\n{<br \/>\n\"name\"\t\t: \"Chang\",<br \/>\n\"address\"\t: \"Thailand\",<br \/>\n\"gender\"\t: \"Male\"<br \/>\n},<br \/>\n{<br \/>\n\"name\"\t\t: \"Ali\",<br \/>\n\"address\"\t: \"London\",<br \/>\n\"gender\"\t: \"Male\"<br \/>\n}<br \/>\n]<\/code><\/p>\n<p>following script would be writtent on the client Side (in the GSP):<\/p>\n<pre lang=\"javascript\"><script>\r\n$.document.ready(function(){\r\n$('#someid').click(function(){\r\n<strong>$.getJSON<\/strong>(\"${createLink(controller:'my',action:'someaction')}\",{gender:'Male', ajax: 'true'}, function(myDomains){\r\nvar myHTMLString = ''\r\nfor(var i = 0 ; i < myDomains.length ; i++)\r\n{\r\nmyHTMLString = myHTMLString + '<tr><td>' + myDomains[i].name + '<\/td>'\r\nmyHTMLString = myHTMLString + '<tr><td>' + myDomains[i].address + '<\/td>'\r\nmyHTMLString = myHTMLString + '<tr><td>' + myDomains[i].gender + '<\/td><\/tr>'\r\n}\r\n$('table#mytable').html(myHTMLString)\r\n})\r\n})\r\n})\r\n<\/script><\/pre>\n<p>The HTML code would be like this :<\/p>\n<p>&lt;div id=&#8221;someid&#8221;&gt;<br \/>\nClick for JSON Response<br \/>\n&lt;\/div&gt;<br \/>\n&lt;table id=&#8221;mytable&#8221;&gt;<br \/>\n&lt;!&#8211;empty table &#8211;&gt;<br \/>\n&lt;\/table&gt;<\/p>\n<p>When you click on the displayed text the html page would become like following:<\/p>\n<p><code>&lt;div id=\"someid\"&gt;<br \/>\nClick for JSON Response<br \/>\n&lt;\/div&gt;<br \/>\n&lt;table id=\"mytable\"&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;John&lt;\/td&gt;<br \/>\n&lt;td&gt;New York&lt;\/td&gt;<br \/>\n&lt;td&gt;Male&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Rob&lt;\/td&gt;<br \/>\n&lt;td&gt;Indonasia&lt;\/td&gt;<br \/>\n&lt;td&gt;Male&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Shayam&lt;\/td&gt;<br \/>\n&lt;td&gt;New Delhi&lt;\/td&gt;<br \/>\n&lt;td&gt;Male&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Chang&lt;\/td&gt;<br \/>\n&lt;td&gt;Thailand&lt;\/td&gt;<br \/>\n&lt;td&gt;Male&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;Ali&lt;\/td&gt;<br \/>\n&lt;td&gt;London&lt;\/td&gt;<br \/>\n&lt;td&gt;Male&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<\/code><\/p>\n<p>any kind of suggestions and comments are welcome&#8230;&#8230;<\/p>\n<p>Regards,<br \/>\nChandan Luthra<\/p>\n<p>http:\/\/www.tothenew.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to use $.getJSON() method of jQuery with grails? Retriving a JSON string from Grails is very easy. You have to just write the following in your controller&#8217;s action Let me explain you with an example of populating a HTML table using JSON response: In this example, we have table with columns &#8211; name,address and [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[7],"tags":[4840,55,27,49],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/27"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}