sending javascript object arrays as parameters to controller

Question

Question is pretty self explanatory. I want to send 2 different arrays of objects through a POST form without ajax to my controller.

I changed my question to using ajax and using a get request due to the size of the params. Currently getting a 400 (Bad Request). I have no idea why. Please take a look...

I have objects:

var phone = {phoneId:"", phoneNumber:"", phoneType:""};
var schedule = {scheduleId:"", time:"", day:""};

Which I place into a javascript arrays:

var phones = [phone1, phone2, phone3];
var schedules = [schedule1, schedule2];

and I use ajax to send:

var data = {
    index: id,
    schedules: schedules,
    phones: phones
}
var url = "/myController/myUrl"

$.getJSON(url, data, function(result){
    if(result.ok){
         $('#messageAlertSuccess').show();
    } else {
         $('#messageAlertError').show();    
    }
});

I created wrapping classes to map them like so:

public class PhoneWrapper(){
    private String phoneId;
    private String phoneNumber;
    private String phoneType;
}

And of course the scheduleWrapper follows the same convention.

Here's the method in my controller:

@ResponseBody
@RequestMapping(value="/myUrl", method=RequestMethod.GET)
public Result doSomething(@RequestParam("index") int index,
                          @RequestParam("phones") Set<PhoneWrapper> phoneWrappers,
                          @RequestParam("schedules") Set<ScheduleWrapper> scheduleWrappers,
                          Model model,
                          HttpSession session){

         //do stuff here.

}

I am currently getting a 400. So what's wrong?

---

Update: here's the url that the .getJSON jquery method is building:

http://localhost:8080/myApp/myController/myUrl?index=9&schedules%5B0%5D%5BscheduleId%5D=1&schedules%5B0%5D%5BfromDay%5D=Monday&schedules%5B0%5D%5BtoDay%5D=Friday&schedules%5B0%5D%5BfromTime%5D=08%3A30%3A00&schedules%5B0%5D%5BtoTime%5D=16%3A00%3A00&schedules%5B1%5D%5BscheduleId%5D=5&schedules%5B1%5D%5BfromDay%5D=Saturday&schedules%5B1%5D%5BtoDay%5D=Monday&schedules%5B1%5D%5BfromTime%5D=09%3A00%3A00&schedules%5B1%5D%5BtoTime%5D=13%3A00%3A00&phones%5B0%5D%5BphoneId%5D=6&phones%5B0%5D%5BphoneNumber%5D=787-788-1111&phones%5B0%5D%5BphoneType%5D=PHONE&phones%5B1%5D%5BphoneId%5D=106&phones%5B1%5D%5BphoneNumber%5D=787-795-4095&phones%5B1%5D%5BphoneType%5D=FAX

Answer 1

I see a few things that don't look right

unless you have getters and setters in your wrappers (DTO is a better name), i don't use them for my DTOs for xhr calls, you need to change

public class PhoneWrapper(){
    private String phoneId;
    private String phoneNumber;
    private String phoneType;
}

to have public fields vs private

public class PhoneWrapper(){
    public String phoneId;
    public String phoneNumber;
    public String phoneType;
}

Your js arrays are not arrays but objects;

var phones = {phone1, phone2, phone3};
var schedules = {schedule1, schedule2};

Here they are as arrays

var phones = [phone1, phone2, phone3];
var schedules = [schedule1, schedule2];

Make sure you naming is the same of both the js and java sides. I find it very helpful to turn on the debugging when troubleshooting these problems. log4j -

<logger name="org.springframework.web.servlet.mvc" >
    <level value="debug" />
</logger>

EDIT

So after the question was updated with more info I notice that it was the same problem as Binding a list in @RequestParam

Answer 2

I would say that you are almost there! The first thing the you need is a wrapper to hold the two Set<> parameters since spring is not able to map a collection directly to parameters (yet?).

Also, there are two ways to handle this kind of requests:

• use a json request and @Requestbody with a single javascript object in the request body an map this into a java class (automatically by spring). This means you need to change a little how the data is send down and this approach has one side effect: you cannot merge data simply by defining the parameter as a model attribute.

• a second possibility is to stay with the post form submit. Also here you need to create the wrapper and use this one as a requestparam. Either one per Set<> parameter like @Sotirios mentioned in his answer or one parameter which holds both sets. Then you need to modify your submit data to send the phone and schedule information like input fields. I haven't used sets in this case but lists and the parameter names would look like phoneWrapper[0].phoneId. The advantage of the second approach is that you can merge the request data with existing values so you do not need to send down a complete phone information all the time.

Answer 3

var phones = {phone1, phone2, phone3};
var schedules = {schedule1, schedule2};

These two are not arrays (square brackets), but objects (curly brackets). Compare with

var phones = ["phone1", "phone2", "phone3"];
var schedules = ["schedule1", "schedule2"];

and if you are to pass actual object references (phone1, phone2, phone3, schedule1 and schedule2 are object variables) then you need to use

var phones = [phone1, phone2, phone3];
var schedules = [schedule1, schedule2];

Answer 4

For spring the map request parameters to Class instance fields, they have to match the name of the parameter.

So with

<input type="hidden" name="someParameter" value="123"/>

and

public class SomeClass {
    private String someParameter;
    // getters and setters
}

a Spring controller will be able to be injected with a SomeClass instance whose field someParameter has the value 123 that comes from the html hidden input request parameter. This is also known as a command object.

A javascript array has no meaning to either html or http.

As for the solution, I would keep your class PhoneWrapper, use javascript to populate 3 <input> elements, and change the method definition to

@RequestMapping(value=MY_URL, method=RequestMethod.POST)
public String doSomething(@RequestParam("index") int index, 
                      PhoneWrappers phoneWrappers, 
                      ScheduleWrappers scheduleWrappers,
                      Model model,
                      HttpSession session){

Notice there are no more array [] brackets. (You would do the same for ScheduleWrappers).