Question

Given the following HTML form:

<form id="myform">
  Company: <input type="text" name="Company" value="ACME, INC."/>
  First Name: <input type="text" name="Contact.FirstName" value="Daffy"/>
  Last Name: <input type="text" name="Contact.LastName" value="Duck"/>
</form>

What is the best way serialize this form in javascript to a JSON object in the format:

{
  Company:"ACME, INC.",
  Contact:{FirstName:"Daffy", LastName:"Duck"}
}

Also note that there might be more than 1 “.” sign in the field name.

Answer 1

I think that what you’d do is this: for each input, first split the name at the separators (the ‘.’ characters). Now, you have an array of names. You can then iterate through that array, making sure that your target “assembly” object (and sub-objects) have containers every time you come across a new name segment. When the array has 1 element in it, you simply add the value.

$.fn.extractObject = function() {
  var accum = {};
  function add(accum, namev, value) {
    if (namev.length == 1)
      accum[namev[0]] = value;
    else {
      if (accum[namev[0]] == null)
        accum[namev[0]] = {};
      add(accum[namev[0]], namev.slice(1), value);
    }
  }; 
  this.find('input, textarea, select').each(function() {
    add(accum, $(this).attr('name').split('.'), $(this).val());
  });
  return accum;
});
// ...

var object = $('#myform').extractObject();

I just sort-of made that up so there might be a bug or two; I can’t remember whether all the browsers have “slice” but I think they do.

(edit: I forgot the all-important call to split())