格式提交JSON格式提交

Question

（背景）我正在构建一个简单的表单生成器，用户将能够创建一个调查/问卷。一旦用户完成了用于创建实际表单的表单的设计，就会创建一个json输出。由于其设计/构建表单的表单构建器用户可以添加复选框或广播字段或选择框选项，并且可以编辑它们的值和标签。 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>.... 

我被困在产生json的点上。我希望能够得到一个清洁的O/P与复选框选项/收音机/选择框选项组合在一起作为'儿童'。样品JSON（我认为将是有益的）：

[ 
    { 
     "title": "Gender", 
     "subtitle": "This is a required question.", 
     "name": "gender", 
     "children": [ 
      { 
       "label": "Male", 
       "value": "male" 
      }, 
      { 
       "label": "Female", 
       "value": "female" 
      }, 
      { 
       "label": "Non traditional", 
       "value": "nontraditional" 
      } 
     ] 
    } 
] 

什么我现在越来越：

[ 
    { 
     "title": "Gender", 
     "subtitle": "This is a required question.", 
     "name": "gender", 
     "label":["Male", "Female", "Non traditional"], 
     "value":["male", "female", "nontraditional"] 
    } 
] 

我在做什么：

$('.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; 
     }; 

当我把孩子们的数组迭代它们：

obj = []; 
$('.children').each(function (i,v) { 
    obj.push(obj[v.name] = v.value); 
}); 
console.log(obj); 

我得到：

["Male", "male", "Female", "female", "Non traditional", "nontraditional", label: "Non traditional", value: "nontraditional"] 

我很困惑，如果我要重新构造我的HTML或者，如果我可以改变JSON输出。任何形式的帮助表示赞赏。先谢谢你。

Answer 1

您可以修改serializeObject()函数来创建你想要的JSON，如果你可以改变你的元素的“名称”属性是：

<li> 
    <div class="ctrl-checkboxgroup children" name="children"> 
     <input type="checkbox"> 
     <input name="children[0].label" type="text" value="" placeholder="Option Label.." class="input-small editable"> 
     <input name="children[0].value" type="text" value="" placeholder="Option Value.." class="input-small editable opt-value"> 
    </div> 
    <div class="ctrl-checkboxgroup children" name="children"> 
     <input type="checkbox"> 
     <input name="children[1].label" type="text" value="" placeholder="Option Label.." class="input-small editable"> 
     <input name="children[1].value" type="text" value="" placeholder="Option Value.." class="input-small editable opt-value"> 
    </div> 
</li> 

当然的serializeObject()功能的逻辑会更复杂，因为它必须按“”分割名称。并检查方括号。这将是可能的，但。

UPDATE：

这里是在serializeObject()可能会是什么样子jsfiddle。它支持所有的以下输入名称：

1. XXX
2. xxx.yyy
3. XXX [0]
4. XXX [0] .yyy
5. XXX [0] .yyy [0]
6. XXX [0] [0]
7. XXX [0] [0] .yyy
8. XXX [0] [0] .yyy [0]