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

Converting json array into variable names/ values from nested form data to repopulate form

本文关键字:表单 新填充 填充 变量名 数组 json 嵌套 数据 转换      更新时间:2023-09-26

希望我能正确解释这一点。我有一个从分组的表单元素(如)转换为嵌套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][]的关键整数,这会给我提供错误的名称来查找和填充表单上的元素。

我该怎么绕过这个?

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

试试这个。小提琴

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

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