将json数组转换为嵌套表单数据中的变量名称/值,以重新填充表单

时间:2013-07-26 01:28:21

标签: javascript arrays json javascript-objects

希望我能正确解释这一点。我有一个表单,可以从分组的表单元素(如

)转换为嵌套的json
<input type="checkbox" name="faults[slats][]" value="cracked"/>
<input type="checkbox" name="faults[slats][]" value="broken"/>
<input type="text" name="partsRequired[0][partDescription]"/>
<input type="text" name="partsRequired[0][size][]"/>
<input type="text" name="partsRequired[0][size][]"/>
<input type="text" name="partsRequired[1][partDescription]"/>
<input type="text" name="partsRequired[1][size][]"/>
<input type="text" name="partsRequired[1][size][]"/>

生成的解析json看起来像:

{
    faults : {
        "slats": [
            "cracked",
            "broken"
        ]
    },
    partsRequired: [
        {
            "partDescription": "Fabric Ochre",
            "size": ["1x5m", "1m", "2m"],
            "colour": "Ochre",
            "quantity": "1"
        },
        {
            "partDescription": "",
            "size": "",
            "colour": "",
            "quantity": ""
        }
    ]
}

我需要能够遍历这些数据并重新填充表单。我有一个函数,它以一种允许我为第一组数据“故障”执行此操作的方式重新创建变量名称和值。我遇到的问题是我无法弄清楚如何将两者合并在一起所需的第二个场景部分。

见小提琴:http://jsfiddle.net/JyfA2/1/。您可以看到,如果将数组传递给数组函数,它会创建正确的数据,但是传递partsRequired会保存partsRequired [0] [size] []的键整数,这会给我一个错误的名称来查找并填充表单上的元素

我怎样才能解决这个问题?

2 个答案:

答案 0 :(得分:0)

我有很多要注意的事情。首先,你在jsfiddle中拥有的东西不是真正的JSON。它是对象字面符号。它们是有区别的。不同之处在于您可以使用点表示法(例如:partsRequired.size)来获取和设置值。使用实际的JSON,你必须将它发送到像jQuery一样的json解析函数。

var faults = {
"slats": [
"Over tighten slats"
],
"fabric": [
"Fraying (not overlooked)"
],
"leather": [
"Scuffed / Scratched",
"Indents / Creasing"
],
"headboard": [
"Damage Upholstery"
]
}    

var partsRequired= [
{
"partDescription": "Fabric Ochre",
"size": ["1x5m","1m","2m"],
"colour": "Ochre",
"quantity": "1"
},
{
"partDescription": "",
"size": "",
"colour": "",
"quantity": ""
}
];

console.log(faults.headboard[0]);
console.log(faults.leather[0] + " & " + faults.leather[1]);

console.log(partsRequired[0].size[0]);
partsRequired[0].size[0] = 'whatever';
console.log(partsRequired[0].size[0]);

partsRequired[1].size = [];
partsRequired[1].size.push("1");
partsRequired[1].size.push("2");
partsRequired[1].size.push("3");

for(var i = 0; i < partsRequired[1].size.length; i++){
    console.log(partsRequired[1].size[i]);
}

看看这个,看看我的意思的一些例子。 http://jsfiddle.net/7ZB3G/

编辑:添加了将值放在右侧文本框中的代码 http://jsfiddle.net/chUQV/5/

答案 1 :(得分:0)

试试这个。 FIDDLE

问题是,如果值的类型也是Object,则需要以递归方式解析值。

if (value instanceof Array || value instanceof Object) {
    BuildVarNamesValuesArray(value, arrayNames, arrayValues, ikey);
}