jQuery .serializeArray() Method

What You’ll Learn

.serializeArray() returns form data as an array of { name, value } objects instead of a query string. This tutorial covers the no-argument signature, W3C successful-control rules, iterating with $.each(), equivalence with .serialize() via $.param(), transforming fields before Ajax, building plain objects for JSON APIs, and when to prefer each serialization method.

Introduction

.serialize() gives you one URL-encoded string — perfect for $.post(), but awkward when you need to rename a field, drop empty values, or inspect each input separately. .serializeArray() returns structured data instead: an array where every successful control becomes { name: "fieldName", value: "fieldValue" }.

That array is what jQuery passes to $.param() inside .serialize(). Exposing it directly lets you modify the list, convert it to JSON, or build a plain object before sending. Same successful-control rules apply — only named, enabled, checked-as-required fields appear.

Understanding .serializeArray()

.serializeArray() is a collection method that accepts no arguments and returns an Array of plain objects. Each object has exactly two properties: name (string) and value (string). Empty arrays are valid when no successful controls exist.

The method uses W3C rules for successful controls — identical to .serialize(). Multi-select options produce one object per selected option with the same name. Checkboxes without a value attribute serialize as value: "on" when checked.

📝 Syntax

Collection method — .serializeArray()

jQuery( formElements ).serializeArray()

Sample return value

[
  { name: "a", value: "1" },
  { name: "b", value: "2" },
  { name: "c", value: "3" }
]

Relationship to .serialize() and $.param()

var arr = $( "form" ).serializeArray();

// Same string as .serialize() when array is unchanged:
$.param( arr ) === $( "form" ).serialize();

Return value

• Returns an Array — not a jQuery object, not a string.
• Each element is { name: String, value: String }.
• Re-wrap the form with $() if you need jQuery chaining after calling this method on a stored reference.

Examples Gallery

Five progressive examples from a basic array on submit through official-style iteration, $.param equivalence, field transforms, and mapping to a JSON-friendly object. Each links to a Try-it lab.

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();

  var fields = $( this ).serializeArray();
  $( "#json-out" ).text( JSON.stringify( fields, null, 2 ) );

  console.log( fields );
  // [ { name: "username", value: "john" }, { name: "email", value: "..." } ]
} );

Submit form → #json-out shows formatted array

Each entry: { "name": "...", "value": "..." }

Unchecked boxes and unnamed inputs omitted

function showValues() {
  var fields = $( ":input" ).serializeArray();
  $( "#results" ).empty();

  jQuery.each( fields, function( i, field ) {
    $( "#results" ).append(
      $( "<span>" ).text( field.name + "=" + field.value ).css( "margin-right", "8px" )
    );
  } );
}

$( ":checkbox, :radio, select" ).on( "click change", showValues );
showValues();

Toggle controls → #results shows "name=value" chips

Each field object exposes .name and .value separately

Useful for custom UI without string parsing

var $form = $( "#demo-form" );

var fromArray = $.param( $form.serializeArray() );
var fromSerialize = $form.serialize();

$( "#match" ).text( fromArray === fromSerialize ? "Match!" : "Mismatch" );
$( "#string" ).text( fromSerialize );

// decodeURIComponent for human-readable debug:
console.log( decodeURIComponent( fromSerialize ) );

#match shows "Match!" — strings identical

Pipeline: serializeArray → $.param → same as .serialize()

After editing array, $.param(modified) differs from .serialize()

$( "#save" ).on( "click", function() {
  var data = $( "#profile-form" ).serializeArray();

  // Drop empty optional fields
  data = data.filter( function( field ) {
    return field.value.trim() !== "";
  } );

  // Append CSRF token
  data.push( { name: "_token", value: "abc123" } );

  $.post( "/api/profile", $.param( data ), function( response ) {
    console.log( "Saved", response );
  } );
} );

Empty bio field filtered out

_token=abc123 appended to array

$.param(data) POSTs modified query string

function arrayToObject( fields ) {
  var obj = {};
  fields.forEach( function( field ) {
    obj[ field.name ] = field.value;
  } );
  return obj;
}

var payload = arrayToObject( $( "#signup-form" ).serializeArray() );

$.ajax( {
  url: "/api/signup",
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify( payload )
} );

serializeArray → { username: "john", email: "..." }

JSON.stringify → POST body for REST API

Duplicate names: last value wins in simple map — use reduce for arrays

🚀 Common Use Cases

• Debug forms — inspect exact name/value pairs before Ajax submission.
• Field filtering — remove empty optional inputs or internal-only fields.
• Add hidden tokens — push CSRF or session values into the array before $.param().
• Custom validation UI — iterate and highlight fields by field.name.
• JSON API bridge — map array to object then JSON.stringify.
• Multi-step wizards — merge arrays from partial forms before one POST.

📝 Notes

• .serializeArray() accepts no arguments and returns an Array.
• Same successful-control rules as .serialize() — see the .serialize() tutorial.
• .serialize() === $.param( .serializeArray() ) when the array is unmodified.
• Duplicate name keys are valid — multi-select and repeated fields produce multiple objects.
• Simple object mapping loses duplicate names — last value wins; use arrays or $.param().
• File inputs never appear — use FormData for uploads.
• Available since jQuery 1.2 — one release after .serialize() (1.0).

💡 Best Practices