在表单上使用serializeObject()来创建具有内部数组的JSON对象

时间:2013-05-06 00:44:17

标签: jquery html json forms

我的表格看起来有点像这样

<form>
<input type='text' name='_id'/>
<input type='text' name='name'/>
<textarea name='description'/>
<input type='text' name='category'/>
<input type='checkbox' name='reservable'/>
<ol>
    <li><input type ='text' name='_id'/><input type='text' name='name'/><input type='text' name='value'/></li>
    <li><input type ='text' name='_id'/><input type='text' name='name'/><input type='text' name='value'/></li>
</ol>
</form>

我正在尝试在此表单上使用serializeObject()方法,并且它在大多数情况下都运行良好。问题是我希望列表中的元素成为一个数组,每个li元素都是数组中的一个对象,如此...

{
_id:'5',
name:'bob',
description:'tall',
categoryId:'human',
reservable:'false',
attributes:
[
    {
        _id:'3',
        name:'hair',
        value:'brown'
    }
]

}

我现在得到的是这样的

 {
 "_id:":"5",
 "name:":"bob",
 "description:":"tall",
 "categoryId":"human",
 "name":["hair",""],
 "value":["brown",""]
 }

有没有办法让它将属性作为一个对象数组?如果有人能告诉我为什么我的复选框没有显示出来,我会非常感激。

1 个答案:

答案 0 :(得分:2)

我在没有经过测试的情况下这样做,所以希望我不会失败并且可以推动你朝着正确的方向前进。我会尝试类似的东西:

<强> HTML

<form>
<input type='text' name='_id' id="the_id"/>
<input type='text' name='name' id="the_name"/>
<textarea name='description' id="desc"/>
<input type='text' name='category id='category'/>
<input type='checkbox' name='reservable' id='reservable' />
<ol>
    <li><input type ='text' name='_id'/><input type='text' name='name' id='attr_part' /><input type='text' name='value'/></li>
    <li><input type ='text' name='_id'/><input type='text' name='name id='attr_color'/><input type='text' name='value'/></li>
</ol>
</form>

<强>的jQuery

// Initializes the array
var person = {};

person.id = $('#the_id').val();
person.name = $('#the_name').val();
person.desc = $('#desc').text();
person.category = $('#category').val();
person.reservable = $('#reservable').val();

// Initialize the attributes array
person.attributes = {};

var attribute = {};

attribute.part = $('#attr_part').val();
attribute.color = $('#attr_color').val();

person.attributes.push(attribute);