Feature Request: Support nested objects

[crockpotveggies]

This is a feature request for supporting nested objects by doing the following:

<input name="name.first"><input name="name.last">

The above input would render to a JSON object that would look like {"name":{"first":"J","last":"Lo"}}.

The use case for this is supporting custom fields for applications that require customized forms. This allows nesting of any type of data without requiring a Javascript coder to do heavy manipulation either client-side or server-side. Would love to see this, and could possibly contribute myself if you explain what I need in order to set up my dev environment.

[hongymagic]

I did ponder about this before, but it seems like the behaviour is too specific to make it the default. How about if we implement it like this:

$('form').serializeObject('.');
// uses '.' as the namespace separator

$('form').serializeObject();
// if used without, assume no nesting

This way, the API can remain backwards compatible:

$.serializeObject(/* optional namespace separator */);

Setting up development environment should be easy, once you fork it:

$ git clone <your fork git url>
$ cd jQuery.serializeObject
$ npm install -g grunt-cli
$ npm install
$ grunt

[crockpotveggies]

Do you plan on adding additional configs in the future? I wonder if this would be too verbose:

$('form').serializeObject({separator: "."});

Agreed that backwards compatibility takes priority.

I'm going to give the dev environment a quick test (haven't developed in node before, been in the JVM). If you have any suggestions on where I should focus first in the code, I'd greatly appreciate it.

[pho3nixf1re]

I would like to request this functionality as well. I may implement it myself actually and submit a pull req. I don't mind the extra verbosity of named config options as they tend to explain what they do more clearly. A potential example implementation: https://github.com/tlowrimore/jquery.serialize-object/blob/master/jquery.serialize-object.js

[pho3nixf1re]

In my experimentation I noticed that you turn duplicated attribute names into an array. Normally this requires appending [] to the end of the name. In the nested object functionality should we do both duplicates and [] to create attribute arrays or swap to just converting [] to arrays. Normally web servers only interpret attributes ending in [] as arrays and just overwrite duplicates with the last value it comes across. But I'm not sure we need to break the current way it functions. However, we could change it to function more like a web server in the new nested attribute implementation. What are your thoughts @hongymagic ?

[pho3nixf1re]

I decided to refactor the whole thing and support both options I mentioned above. Added full test coverage and everything is passing.

[hongymagic]

RE: [] and array: see issue #6. Happy for you to weigh in on that too.

[AdamBoxall]

Why break URL-encoding and not just embrace it with input names like foo[bar], that would result in:

{
    "foo": {
        "bar": "..."
    }
}

[pho3nixf1re]

@AdamBoxall my pull req handles any case as you can pass it a custom delimiter. By default it uses [].

[macek]

You can accomplish this easily with my plugin, jquery-serialize-object.

<input name="name[first]" value="J">
<input name="name[last]" value="Lo">

Output

{"name": {"first": "J", "last": "Lo"}}

The plugin also allows you to modify the patterns to support other custom notations. A popular request was the "Dot" notation

<script>
  // configure jquery-serialize-object to use "dot" notation
  $.extend(FormSerializer.patterns, {
    validate: /^[a-z][a-z0-9_]*(?:\.[a-z0-9_]+)*(?:\[\])?$/i
  });
</script>

<input name="name.first" value="J">
<input name="name.last" value="Lo">

Checkout the tests to see the other supported functionalities.

[hongymagic]

@macek looks like a great alternative! For those who require turning complex HTML forms into a nested JSON object, please see @macek's comment above.