在表單提交上格式化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的地方。 我希望能夠將復選框選項/收音機/選擇框選項組合在一起作為“兒童”，以獲得更清晰的操作。 示例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，如果您可以將元素的“name”屬性更改為：

<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()函數的邏輯會更復雜，因為它必須將名稱拆分為“。”。 並檢查方括號。 但是有可能。

更新：

這是一個jsfiddle，顯示了serializeObject()外觀。 它支持以下所有輸入名稱：

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]