Serialize Form to Nested JSON w/ JQuery

Question

Apologies if this has been asked...but I can't find (or I am using completely wrong terms...)

I have a form like this:

<form>
  <div>
  <input name="[0].RoleId" type="hidden" value="1">
  <input name="[0].RoleName" type="hidden" value="Administrator">
  <input name="[0].Selected" type="checkbox" checked="checked" >
  <span>Administrator</span>
  </div>

  <div>
  <input name="[1].RoleId" type="hidden" value="2">
  <input name="[1].RoleName" type="hidden" value="Manager">
  <input name="[1].Selected" type="checkbox" >
  <span>Manager</span>
  </div>

  etc...

</form>

I would like to convert this into the following json:

   roles [
     {
       "RoleId" : "1",
       "RoleName" : "Administrator",
       "Selected" : "checked"
     },
     {
       "RoleId" : "2",
       "RoleName" : "Manager",
       "Selected" : "unchecked"
     }
   ]

I am using ASP.Net MVC 3 to generate input elements. Basically what I am trying to do is the following...

I have a user screen. From there users can select from a list of roles (displayed in jquery ui dialog). When user selects role, and click "OK" the pop up closes, and they will see the selected roles in the user screen. I am planning on using jquery data) to store the data selected in dialog, then I need to parse and add to the user screen. This is all client side until they click on Save in the user screen.

score 6 · Accepted Answer · edited May 23 '17 at 11:43

6

I ended up using this library:

http://code.google.com/p/form2js/

There is a similar question in SO

Serialize complex form to JSON object using jQuery

edited May 23 '17 at 11:43

Community

1
1

answered Jun 15 '11 at 13:47

B Z

9,363
16
67
91

1

form2js is unrealiable when it comes to radio button values. – sparkyspider Dec 29 '12 at 08:14

two13 · Answer 2 · 2011-06-13T22:34:00.223

Try this javascript/jquery (or convert jquery to equivalent javascript if you need):

$(document).ready(function() {
    var roles = [];
    var role;
    for (var i = 0; i < 2; i++)
    {
        role = {};
        role.RoleId = $("input[name='roles["+ i +"][RoleId]']").val() || "";
        role.RoleName = $("input[name='roles["+ i +"][RoleName]']").val() || "";
        if ($("input[name='roles["+ i +"][Selected]']").is(":checked"))
            role.Selected = "checked";
        else
            role.Selected = "unchecked";
        roles[i] = role;
    }
    var json_str = JSON.stringify(roles);
    alert(json_str);
});

With this html:

<form>
    <div>
        <input name="roles[0][RoleId]" type="hidden" value="1">
        <input name="roles[0][RoleName]" type="hidden" value="Administrator">
        <input name="roles[0][Selected]" type="checkbox" checked="checked" >
        <span>Administrator</span>
    </div>
    <div>
        <input name="roles[1][RoleId]" type="hidden" value="2">
        <input name="roles[1][RoleName]" type="hidden" value="Manager">
        <input name="roles[1][Selected]" type="checkbox" >
        <span>Manager</span>
    </div>
</form>

score 0 · Answer 3 · answered Sep 01 '15 at 14:21

0

You can use: jquery.serializeToJSON - https://github.com/raphaelm22/jquery.serializeToJSON Its is prepared to work with forms ASP MVC

var obj = $("form").serializeToJSON({associativeArrays: false});

answered Sep 01 '15 at 14:21

Raphael Monteiro Nunes

43
5

Serialize Form to Nested JSON w/ JQuery

3 Answers3