Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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?

share|improve this question
    
is the code that you are using to get JSON out of the form custom because honestly I would take a completely different approach then what you are doing. Especially with the form element names. I guarantee there is a much easier way. –  hvchris Jul 26 '13 at 2:27
    
The code used to generate the json is custom. I need the ability to use name like the ones I have posted to create a json tree structure that you see. If you have other ideas of how to do that without creating the issue I have here, I'd love to hear how you'd go about it. –  user2535949 Jul 26 '13 at 2:46

2 Answers 2

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/

share|improve this answer
    
basically the point i'm trying to make is that building 2 arrays to store values that are already available to you in the 2 objects doesn't really make sense. just call them using dot notation or in the form of a loop. –  hvchris Jul 26 '13 at 2:58
    
It was an oversightto post what I did as JSON when its the parsed JSON that I'm showing. I have corrected this to state that. I am building the arrays because the keys and structure of the json and resulting object literals are dynamic. I need a way to cycle through this data and populate it on the form. I have to find the form element via its name attribute in this particular instance. Its not as simple as simply looping through the elements and finding them because they are named a certain way and can have multiple values etc. Perhaps I am missing something very obvious? –  user2535949 Jul 26 '13 at 3:21
    
you aren't chris hake are you? –  hvchris Jul 26 '13 at 3:23
    
added a piece of code to the end to do what you are taking about, does that help at all? also please note that the [] had to be removed to get the code to work. –  hvchris Jul 26 '13 at 3:31
    
Unfortunately, removing the [] isn't an option but thank you. –  user2535949 Jul 26 '13 at 3:38

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);
}
share|improve this answer
    
Thanks for you answer :) Unfortunately its not quite there as not all names will need the []. Eg. partsRequired[0][partDescription] will have just a single value, whereas partsRequired[0][size][] can have multiple. Both names need to captured as such. Does that make sense? –  user2535949 Jul 27 '13 at 0:08
    
@user2535949 I just updated the fiddle, please try. –  zsong Jul 27 '13 at 0:19
    
Thanks again :) Here though we have kind of the reverse problem since the faults names need to be like faults[slats][], faults[leather][] with an array of values for each since there could be several :/ –  user2535949 Jul 27 '13 at 22:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.