How to convert serialized form to json format which having a list of tags

Question

Here is my form:

<form>
 <input type="text" value="value1a" name="parentobject.childobject[0].field1"/>
 <input type="text" value="value2a" name="parentobject.childobject[0].field2"/>
 <input type="text" value="value3a" name="parentobject.childobject[0].field3"/>

 <input type="text" value="value1b" name="parentobject.childobject[1].field1"/>
 <input type="text" value="value2b" name="parentobject.childobject[1].field2"/>
 <input type="text" value="value3b" name="parentobject.childobject[1].field3"/>
</form>

when i used JSON.stringify($('form').serializeArray()), the value converted to json but not my expected result.

output after using JSON.stringify($('form).serializedArray())

{
 "parentobject.childobject[0].field1" : "value1a"
 "parentobject.childobject[0].field2" : "value2a"
 "parentobject.childobject[0].field3" : "value3a"
 "parentobject.childobject[1].field1" : "value1b"
 "parentobject.childobject[1].field2" : "value2b"
 "parentobject.childobject[1].field3" : "value3b"
} 

and here is my expected result :

 {
    "parentobject": {
        "childobject": [
            {
                "field1": "value1a",
                "field2": "value2a",
                "field3": "value3a"
           },
            {
                "field1": "value1b",
                "field2": "value2b",
                "field3": "value3b"
            }
    ]
}

}

I hope someone could help. Thanks in advance.

Answer 1

See http://jsfiddle.net/vorj5o1b/1/

serializeArray() only gets the name and value attributes of the fields in a single object. If you want to customise the output you get, you need to write your own function, so you can create your own custom array and call stringify on the custom array.

var myArray = [];

var fields = $("#f").serializeArray();
var obj = {};
var childObj = {};
var firstIndex = 0;

jQuery.each(fields, function(i, field){
    var parentName = field.name.split('.')[0];
    var childName = field.name.split('.')[1].split("[")[0];
    var childIndex = parseInt(field.name.split('.')[1].split("[")[1].split("]")[0]);
    var fieldName = field.name.split('.')[2];

    if (!obj[parentName]){ //If obj doesn't have the parentName object, create it.
        obj[parentName] = {};
    }

    if (!obj[parentName][childName]){ //if obj[parentName] doesn't have an array yet, create it
        obj[parentName][childName] = [];
    }

    if (firstIndex !== childIndex){ //when it moves from [0] to [1]
        firstIndex = childIndex;
        obj[parentName][childName].push(childObj); //push childObj to obj array
        childObj = {};
    }

    childObj[fieldName] = field.value;
    if (i == fields.length - 1){ //needs an extra if here to add the final childObj
         obj[parentName][childName].push(childObj);
    }
});

myArray.push(obj); //use custom array


var myString = JSON.stringify(myArray); //stringify custom array
console.log(myString);

Answer 2

The jQuery serializeArray method will not parse your field names to derive a hierarchical structure; you will have to code that manually, but it isn't too diffuclt. If you have a well-defined format, you can try something like the code below. If you need a more generic solution allowing for multiple levels of nesting, and different parent names, then you will need to build something more full-featured.

 $(function() { var $form = $("form"); var regex = /.*childobject\\[(\\d)\\].*/; var rgxForField = /.*childobject.*(field\\d)/; var obj = {"parentobject" : {} }; var childObjects = []; obj["parentobject"]["childobject"] = childObjects; $form.find("input[name^='parentobject.childobj']").each(function() { var idx = parseInt(this.name.match(regex)[1], 10); if (!childObjects[idx]) childObjects[idx] = {}; var fieldName = this.name.match(rgxForField)[1]; childObjects[idx][fieldName] = this.value; }); console.log(obj); $form.after($("<div/>", { text: JSON.stringify(obj)})); $form.remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <input type="text" value="value1a" name="parentobject.childobject[0].field1"/> <input type="text" value="value2a" name="parentobject.childobject[0].field2"/> <input type="text" value="value3a" name="parentobject.childobject[0].field3"/> <input type="text" value="value1b" name="parentobject.childobject[1].field1"/> <input type="text" value="value2b" name="parentobject.childobject[1].field2"/> <input type="text" value="value3b" name="parentobject.childobject[1].field3"/> </form> 

Answer 3

You could use eval() function

var parentobject = {
    childobject: [{}, {}]
}
var arr = $('form').serializeArray();
for(var i=0;i<arr.length;i++)
{
eval(arr[i].name+"='"+arr[i].value+"'");
}
alert(JSON.stringify(parentobject))

DEMO