Json serialize to java pojo with nested List<pojo> property

Question

Below is my code attempt to post an Json serialize object (java pojo having list of other pojos) with JQuery Ajax call to Spring MVC controller.

Getting Bad request error from server.

When the modalForm data is removed from the Json object the MainPojo data received correctly at server side.

Html Code

   Fisrt form
   ------------- 
    <form id="mainForm">
           .....
    </form>

    Form in the modal
    -----------------
    <form  id="modelform" ..>
         <div id="row"> 
    <input type="text" id="subject" />
    <input type="text" id="max" />
    <input type="text" id="min" />
      </div>
     <div id="row"> 
    <input type="text" id="subject" />
    <input type="text" id="max" />
    <input type="text" id="min" />
     </div>
         ............. 
    </form>}

Jquery

          var mainObject = $('#mainForm').serializeObject();

          var modelObject = $('#modelform').serializeObject();

          mainObject.marks = modelObject;

Json ( Expected)

          {
            "name": "Some Name",
             "age": "10",
             "marks": [
               {
                 "subject": "maths",
                 "max": "20",
             "min":"12"
                },
               {
                 "subject": "english",
                 "max": "20",
             "min":"12",
                }
              ]
          }

Json (actual output with the above code)

           {
             "name": "Some Name",
              "age": "10",
              "marks": [
                        {
                         "subject": "maths",
                         "subject": "english"
                         },
                         {
                          "max": "20",
                       "max":"20",
                          },
                      {
                       "min": "12",
                       "min":"12"
                       }
                          ]
               }

                 //Ajax call
                 $.ajax({
                       url: '/save',
                   type: 'POST',
                   contentType: 'application/json',
                   mimeType: 'application/json',
                   data : JSON.stringify(mainObject),
                   dataType: 'json',
                   success: function(data) {
                      alert(data.msg);
                   },
                   error:function (xhr, ajaxOptions, thrownError) {
                      alert('Technical error occured');
                   }
           });

Java Pojo's

          public class MainPojo {

            private String name;
            private String age;            
                private Lists<marks>
                ..................
          }

          public class ModelPojo {

            private String subject;
            private String maxMarks;
            private String minMarks;

                .....................
            }

Controller Method

@RequestMapping(value = "save", headers = "Accept=application/json",
                method = RequestMethod.POST)
public @ResponseBody String save(@RequestBody final  MainPojo  mainPojo) {

} 

Please help me to identify the problem.

Thank You.

Answer 1

Modify html text like this

     <form id="mainForm">
    <input name="name" type="text" value="Some Name">
    <input name="age" type="text" value="20">
     </form>
     <form  class="modelform">

    <input type="text" value="subject" name="subject"/>
    <input type="text" value="max" name="max"/>
    <input type="text" value="min" name="min"/>
      </form>
     <form  class="modelform">
    <input type="text" value="subject" name="subject" />
    <input type="text" value="max" name="max"/>
    <input type="text" value="min"  name="min"/>
   </form>

Then write javascript code to assign object value

<script>
    var mainObject = $('#mainForm').serializeObject();
    var modelObject = [];
     $('.modelform').each(function(o){
        modelObject.push($(this).serializeObject());
    })
    mainObject.marks = modelObject;
</script>

Answer 2

i have

 @RequestMapping(value = "/save", method = RequestMethod.POST)
public @ResponseBody
MyEvent saveOrganization(@RequestBody Organization organization) {

    return new MyEvent('save',organization);
}

y your mvc-servlets.xml

 <context:component-scan base-package="com.jrey.project.controllers" />
<context:annotation-config></context:annotation-config>

<mvc:annotation-driven>
    <mvc:message-converters>
        <bean
            class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">

        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

my jquery post

  $.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [ o[this.name] ];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;

};

  <script>
$(document)
        .ready(
                function() {
                    $('.submit', '#form')
                            .click(
                                    function() {
                                        var data = JSON
                                                .stringify($('#form')
                                                        .serializeObject());
                                        console.log(data);

                                        $
                                                .ajax({
                                                    type : "POST",
                                                    url : '${pageContext.request.contextPath}/controller/organization',
                                                    data : data,
                                                    dataType : 'json',
                                                    contentType : 'application/json;charset=UTF-8',
                                                    success : function(data) {
                                                        $(
                                                                '<div>'
                                                                        + data.message
                                                                        + '</div>')
                                                                .dialog(
                                                                        {
                                                                            title : 'Organizacion',
                                                                            modal : true,
                                                                            buttons : {
                                                                                'Aceptar' : function() {
                                                                                    document.location.href = data.location;
                                                                                }
                                                                            }
                                                                        }

                                                                );
                                                    },
                                                });
                                    });
                });