양식 제출시 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 (I 도움이 될 것이라고 생각) :

[ 
    { 
     "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); 

얻을 수 있습니다 :

HTML을 다시 구조화해야하거나 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() 함수의 논리가 더 복잡 것 :

Answer 1

당신은 당신이 당신의 요소의 "이름"속성을 변경할 수있는 경우에 당신이 원하는 JSON을 만들 수 serializeObject() 기능을 수정할 수 있습니다 이름을 "."로 나눠야하므로 대괄호가 있는지 확인하십시오. 그것은 가능할 것이다.

UPDATE : 여기

이 serializeObject() 모습 수있는 것을 보여주는 jsfiddle이다. 이는 다음과 같은 입력 이름을 모두 지원 xxx.yyy

1. XXX
2. 을
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]