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.

Answer 1

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