(Background) I create a simple form builder where the user can create a survey / questionnaire. I create json output after the user has completed the design of the form that will be used to create the actual form. Since his user is a form developer who is involved in the design / creation of the form, he can add radio flags or fields or selections, as well as edit his own values and labels. HTML:
<form class="test-form droppedField checkbox">
<input type="text" name="title" placeholder="Title" class="ctrl-textbox editable"></input>
<input type="text" name="subtitle" placeholder="Sub Title" class="ctrl-textbox editable"></input>
<input type="text" name="name" placeholder="Name/Keyword" class="ctrl-textbox editable">
<input type="hidden" name="type" value="checkbox">
<ul>
<li>
<div class="ctrl-checkboxgroup children" name="children">
<input type="checkbox">
<input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
<input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
</div>
<div class="ctrl-checkboxgroup children" name="children">
<input type="checkbox">
<input name="label" type="text" value="" placeholder="Option Label.." class="input-small editable">
<input type="text" value="" name="value" placeholder="Option Value.." class="input-small editable opt-value">
</div>
</li>
</ul>....
I am stuck at the point where I am creating json. I want to be able to get a cleaner o / p with the / radio / selectbox checkbox options grouped together as “children”. An json example (which I think will be useful):
[
{
"title": "Gender",
"subtitle": "This is a required question.",
"name": "gender",
"children": [
{
"label": "Male",
"value": "male"
},
{
"label": "Female",
"value": "female"
},
{
"label": "Non traditional",
"value": "nontraditional"
}
]
}
]
What is happening now:
[
{
"title": "Gender",
"subtitle": "This is a required question.",
"name": "gender",
"label":["Male", "Female", "Non traditional"],
"value":["male", "female", "nontraditional"]
}
]
What am I doing:
$('.test-form').each(function () {
output.push(JSON.stringify($(this).serializeObject()));
});
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
When I click the children on an array iterating over them:
obj = [];
$('.children').each(function (i,v) {
obj.push(obj[v.name] = v.value);
});
console.log(obj);
I get:
["Male", "male", "Female", "female", "Non traditional", "nontraditional", label: "Non traditional", value: "nontraditional"]
, HTML- JSON. . .