将json数组从嵌套表单数据转换为变量名/值以重新填充表单
Converting json array into variable names/ values from nested form data to repopulate form
希望我能正确解释这一点。我有一个从分组的表单元素(如)转换为嵌套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);
}
相关文章:
- 通过浏览器对表单自动填充做出反应
- 如何在js中实现树结构类型的表单动态填充
- 如何从一个表单的输入字段中获取数据,并使用JQuery在不同的表单中填充相同的输入类型
- 由 Ajax 在表单中填充的选择的 POSTvalue
- 如何用数据预加载表单(新操作),然后在Ruby on Rails中提交
- 登录表单自动填充,在iframe中,在Android浏览器中不起作用
- JQuery - 在表单中填充数据的正确方法
- 防止javascript/jquery中的表单自动填充
- 使用Javascript在表单中填充HTML选择
- Django / Jquery / Javascript -如何使用url参数预填充表单(自动填充表单)
- 如何在jqGrid的编辑表单中填充文本字段
- 通过ajax使用下拉表单重新填充多个选择表单
- 什么是错误的这个表单自动填充javascript
- Wordpress表单自动填充
- 清除表单并填充jquery
- 如何在javascript中删除表单自动填充
- 样式化表单时填充文本
- 谷歌表单脚本填充
- 表单自动填充后启用按钮
- 基于下拉列表中设置的初始值,用Javascript在表单中填充6个字段,其中包含一周中的天数