Serializing a Form for Nested JSON w / JQuery

Question

Serializing a Form for Nested JSON w / JQuery

Sorry if this was asked ... but I can not find (or I use 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 to the following json:

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

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

. ( jquery ui). "", , . jquery) , , . , "" .

+3

jquery jquery-ui asp.net-mvc

B Z 13 . '11 21:58

3

javascript/jquery ( jquery javascript, ):

$(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);
});

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>