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

Question

希望我能正确解释这一点。我有一个表单，它可以从诸如

的分组表单元素转换为嵌套 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][] 的键整数，这给了我错误的名称来查找和填充表单上的元素.

我该如何解决这个问题？

Answer 1

我有很多事情要注意。首先，您在 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/

Answer 2

试试这个。 FIDDLE

问题是，如果值的类型也是 Object，则需要递归解析该值。

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