$.serializeArray() vs object

by Laurens Maneschijn

HTML

<form>
  <input type="checkbox" name="cb[]" value="1" checked>
  <input type="checkbox" name="cb[]" value="2" checked>
  <input type="radio" name="ra[]" value="1">
  <input type="radio" name="ra[]" value="2" checked>
  <select name="selectmultiple[]" multiple>
    <option value="1" selected>1</option>
    <option value="2" selected>2</option>
  </select>
  <select name="selectmultiple_1value_selected[]" multiple>
    <option value="1">1</option>
    <option value="2" selected>2</option>
  </select>
  <select name="selectmultiple_no_value_selected[]" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</form>

see console for output differences:<br>
<code>$('form').serializeArray()</code> <br>
vs<br>
<code>arrayToObject( $('form').serializeArray() )</code><br>

Note that multiple values for same name get lost in the arrayToObject() output.

CSS

code {display:inline-block;margin:2px; padding:1px; border:1px dotted #888;}

JavaScript

console.log( $('form').serialize() );
console.log( $('form').serializeArray() );
console.log( arrayToObject( $('form').serializeArray() ) );
console.log( arrayToObject_allowmultiplevalues( $('form').serializeArray() ) );


function arrayToObject (serialized_form) {
  var object = {};
  for (var i = 0; i < serialized_form.length; ++i) {
    object[serialized_form[i]['name']] = serialized_form[i]['value'];
  }
  return object;
}

function arrayToObject_allowmultiplevalues (serialized_form) {
  // convert value to array if multiple values with same name.
  // problem: multivalues are sometimes array and sometimes not (if only 1 value selected)
  var object = {}, name, value;
  for (var i = 0; i < serialized_form.length; ++i) {
    name = serialized_form[i]['name'];
    value = serialized_form[i]['value'];
    if( object[name] === undefined) {
      // 1st value, save normally:
      object[name] = value;
    } else if ( Array.isArray(object[name]) ) {
      // already an array value for this name, push new value:
      object[name].push(value);
    } else {
      // already a value for this name, but not an array yet. make new array with old and new value:
      object[name] = [ object[name], value];
    }
  }
  for (name in object) {
  	// names ending in '[]' are always considered arrays:
    // (this fixes entries with only 1 or 0 values selected ending up as non-array)
    if ( name.substr(-2) === '[]' && ! Array.isArray(object[name]) ) {
    	object[name] = [ object[name] ];
    }
  }
  return object;
}