Формат JSON on form submit

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 с опциями флажка/radio/selectbox, сгруппированными вместе как «дети». Пример 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:

Вот jsfiddle показывает, что serializeObject() может выглядеть следующим образом. Он поддерживает все следующие имена входных:

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