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

Question

Hopefully I can explain this properly. I have a form that gets converted to nested json from grouped form elements such as

<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][]"/>

The resulting parsed json looks like:

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

I need to be able to loop through this data and repopulate the form. I have a function that recreates the variable names and values in a way that allows me to do that for teh first set of data 'faults'. The issue I am having is that I can't work out how to do it for the second scenario parts required where both are combined.

See fiddle: http://jsfiddle.net/JyfA2/1/ . You can see that if you pass the array to the array function it creates the correct data but passing partsRequired saves the key integer for partsRequired[0][size][] which gives me the wrong name to find and populate the element on the form.

How can I get around this?

Answer 1

I have a bunch of things to make note of. First off what you have in your jsfiddle is not true JSON. It's object literal notation. There is a difference. The difference being is that you can use dot notation (ex: partsRequired.size) to get and set values. With actual JSON you'd have to send it to a json parsing function like jQuery has.

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]);
}

check this out to see some examples of what I mean. http://jsfiddle.net/7ZB3G/

EDIT: added code to put values in the right textbox http://jsfiddle.net/chUQV/5/

Answer 2

Try this. FIDDLE

The problem is you need to recursively parse the value if the value has the type of Object as well.

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