Allow me to clarify this situation. I am working with a form that is converted into nested json from grouped form elements like
<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 analyzed json appears as follows:
{
faults : {
"slats": [
"cracked",
"broken"
]
},
partsRequired: [
{
"partDescription": "Fabric Ochre",
"size": ["1x5m", "1m", "2m"],
"colour": "Ochre",
"quantity": "1"
},
{
"partDescription": "",
"size": "",
"colour": "",
"quantity": ""
}
]
}
I am looking for a way to iterate through this data and refill the form accordingly. I have a method that reconstructs the variable names and values in such a manner that it works for the first set of data 'faults'. However, I am facing difficulty when trying to implement this for the combined scenario of 'parts required'.
Please refer to the provided fiddle: http://jsfiddle.net/JyfA2/1/. When passing the array to the function, you will notice that it generates the correct data. Nevertheless, passing 'partsRequired' saves the key integer for 'partsRequired[0][size][]', which leads to providing the wrong name for finding and populating the element on the form.
How can I overcome this challenge?