Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Turn forms into nested Javascript objects
Tree: 1a965f0425

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Objectify converts forms to complex objects using the PHP/Ruby name-attribute convention. The reason for this is to decouple the value of a form serialization from its presentation to a user. Getting data from your forms should not be tightly-coupled to your markup.

For more information about this parameter format, see

Objectify requires jQuery, although it is not a jQuery plugin per se.

The Objectify Parameter Convention

Objectify uses the HTTP parameter convention popularized by PHP & Ruby:

Nested objects are written inside square-brackets: [ ]

  <!-- an input named like this -->
  <input type="text" name="person[email]" value="" />
  // would be converted to this
    person: {
      email: ""

Objects can be nested to arbitrary depth:

  <input type="text" name="person[phone_numbers][0][extension]" value="214" />
    person: {
      phone_numbers: {
        "0": {
          extension: "214"

Form fields that need to be combined into an array end in '[]'

  <input type="text" name="person[phone_numbers][]" value="555-2178" />
  <input type="text" name="person[phone_numbers][]" value="555-8634" />
    person: {
      phone_numbers: ['555-2178', '555-8634']

Converting a form

Given a form with the id 'person', you simply pass it into Objectify.convert() in one of two ways:

var person1 = Objectify.convert('#person'),      // jQuery selector string
    person2 = Objectify.convert( $('#person') ); // jQuery instance works too

Objectify.convert will also accept an object:

var obj = {
  'person[address][street_address]': '123 Nowhere st.'

//  person: {
//    address: {
//      street_address: '123 Nowhere st.'
//    }
//  }

That's it!

Useful helper methods


Objectify.pack('user', 'address', 'street_address') //=> 'user[address][street_address]'
Objectify.pack('user', 'phone_numbers', []) //=> 'user[phone_numbers][]'


Objectify.unpack('user[address][street_address]') //=> ['user', 'address', 'street_address']


var obj = { foo: { bar: 'baz' } };
Objectify.denormalize(obj) //=> { 'foo[bar]': 'baz' }


var obj = Objectify.convert('#user_form');
Objectify.walk(obj, 'user', 'address', 'street_address') //=> '123 Nowhere st.'

jQuery plugin

With no arguments, behaves like convert. With arguments, behaves like walk.

$('#user_form').objectify() //=> { ... }
$('#user_form').objectify('user', 'address', 'street_address') //=> '123 Nowhere st.'

API status

  • Adding nested objects after "[]" is not yet supported, I'm not sure if this is actually necessary.

This is a work in progress, and anything currently in the documentation may change.

Something went wrong with that request. Please try again.