Question

I am trying to send data to my controller from an ajax function that needs to have multiple levels, so something like this:

{
  "lob": {
    "TESTING": [
      {
        "name": "color",
        "value": "1"
      },
      {
        "name": "time",
        "value": "2"
      },
      {
        "name": "jeremy",
        "value": "3"
      },
      {
        "name": "fourtytwo",
        "value": "4"
      },
      {
        "name": "owl",
        "value": "5"
      },
      {
        "name": "why",
        "value": "6"
      },
      {
        "name": "derp",
        "value": "7"
      },
      {
        "name": "where",
        "value": "8"
      }
    ]
  }
}

but when it sends to grails I am getting this when I print out the params

[lob[TESTING][4][value]:5,
 lob[TESTING][3][name]:fourtytwo,
 lob[TESTING][6][name]:derp,
 lob[TESTING][5][name]:why,
 lob[TESTING][3][value]:4,
 lob[TESTING][1][value]:2,
 lob[TESTING][2][value]:3,
 lob[TESTING][5][value]:6,
 lob[TESTING][1][name]:time,
 lob[TESTING][0][value]:1,
 lob[TESTING][6][value]:7,
 lob[TESTING][0][name]:color,
 lob[TESTING][7][value]:8,
 lob[TESTING][4][name]:owl,
 lob[TESTING][7][name]:where,
 lob[TESTING][2][name]:jeremy,
 action:save,
 controller:LOB]

The data I am sending from JavaScript:

{
    lob: {
        TESTING: $form.serializeArray()
    }
}

I have been reading multiple forums saying using JSON.parse or request.JSON but these solutions do not seem to be fixing my problems. I want to be able to access the data like

params.lob.testing.each{ a->
    println a
}  

I will be doing alot more than just that but it would be nice to be able to access the data in that fashion. I am using Grails 2.1 and Jquery 1.7.2

Answer 1

Actually Grails makes it very easy. I’ve taken your test data and ran it through the following:

import grails.converters.JSON

class LobController {

    def save = {
       def json = request.JSON
       json.lob.TESTING.each {item->
         println "Name: ${item.name} - Value: ${item.value}"
       }
      //render something back if you need to here
  }
}

And it outputs:

Name color - Value: 1
Name time - Value: 2
Name jeremy - Value: 3
Name fourtytwo - Value: 4
Name owl - Value: 5
Name why - Value: 6
Name derp - Value: 7
Name where - Value: 8

I created a UrlMapping entry like this (you probably already have this):

"/myApi"(controller: "lob", parseRequest: true) {
            action = [POST: "save"]
}

The parseRequest: true will automatically parse the incoming JSON.

I found a `serializeJSON’ function that might replace the serializeArray() to format this for JSON. The following was provided by Arjen Oosterkamp on the jQuery serializeArray page:

(function( $ ){
$.fn.serializeJSON=function() {
var json = {};
jQuery.map($(this).serializeArray(), function(n, i){
json[n['name']] = n['value'];
});
return json;
};
})( jQuery );

Simply use as $(‘form’).serializeJSON();

All credit for that function goes to Arjen Oosterkamp…