HTML form for multiple objects when converting to JSON

Question

Edited:

$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    var value = this.value || '';
    if (/^\d+$/.test(value))
        value = +value;

    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(value);
    } else {
        o[this.name] = value;
    }
});
return o;
};`

Edited to hopefully make clearer.

Having difficulty wrapping my head around this - sleep deprivation = madness.

I have a form that simply serialises the data into JSON and stores it for later use.

<form id="form" method="post">

a? <input class="number" type="text" name="a" size="5" maxlength="5"/><br/>

Item 1:

Type?:<br/>
<select size="2" name="type">
    <option value="1">b</option>
    <option value="2">c</option>
</select>

d:<input class="number" type="text" name="d" maxlength="2" size="2"/> <br/>
e:<input class="number" type="text" name="e" maxlength="2" size="2"/> <br/>

<p>Item 2:</p>


Type?:<br/>
<select size="2" name="type">
    <option value="1">b</option>
    <option value="2">c</option>
</select>

d:<input class="number" type="text" name="d" maxlength="2" size="2"/> <br/>
e:<input class="number" type="text" name="e" maxlength="2" size="2"/> <br/>

<input type="submit" />

when the form is serialised the result I get is:

JSON{
    "a":1,
    "type":[1,2],
    "d":[99,33],
    "e":[99,33]
}

what I need is the typical tree structure of JSON something where each item has its own level, something like:

{
"a": "1",

"item1": 
{
    "type": "1",
    "d": "99",
    "e": "99",
},
"item2": 
{
 "type": "2",
 "d": "33",
 "e": "33",
 }

Ideally I'd like to have an option whereby the user can state how many items the form should request information for but I need a basic working example first.

once I have this data I'm then converting it into JSON and would like a tree like structure if possible. Any help appreciated. This post How to serialize a form into an object (with tree structure)? helps a lot but its the structure of the HTML I'm having issues with. Thanks again.

Answer 1

I'd introduce new html attribute:

<input data-item="1" class="number" type="text" name="d" maxlength="2" size="2"/>
<select data-item="1" size="2" name="type"> ...

and then I'd use

$(this).attr('data-item');

to read value and place it in right object. Other option is to get elements only for specified item (in some loop):

$('input[data-item="1"], select[data-item="1"]').each(...);

EDIT I see no pretty way of using serializeArray() to achieve this, but I'd go for item number in name attribute (name="type1") or again for loop with i as item number:

$('[data-item="'+i+'"]', this).serializeArray();

Answer 2

A quick and dirty way would be this: change the name of your inputs based on their item number:

<input name="item1.a" ... />
<input name="item2.a" ... />
<input name="item3.a" ... />

Then modify the serializeObject() to look for the dots:

...
    $.each(a, function() {
        var value = this.value || '';
        if (/^\d+$/.test(value))
            value = +value;

        if ( this.name && this.name.indexOf('.') )
        {
            var split = this.name.split('.');
            o[ split[0] ] = o[ split[0] ] || {};
            o[ split[0] ][ split[1] ] = value
        }
        else if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(value);
        } else {
            o[this.name] = value;
        }
    });
...

NOTE: This code isn't perfect, but it will get you in the right direction!