Jquery 동적 양식 데이터를 json으로 변환

Question

저는 양식으로 퀴즈를 만드는 프로젝트를 진행하고 있습니다. 나는 사용자가 & 질문 및 삭제 옵션을 추가 할 수 있습니다 내 양식이

[ 
    { 
     "questions": [ 
      { 
       "question": "Who is Mark Zuckerberg?", 
       "options": [ 
        { 
         "answer": "Facebook CEO", 
         "correct": 1 
        }, 
        { 
         "answer": "Google Programmer", 
         "correct": 0 
        } 
       ] 
      }, 
      { 
       "question": "Who is the founder of Apple?", 
       "options": [ 
        { 
         "answer": "Mark Zuckerberg", 
         "correct": 0 
        }, 
        { 
         "answer": "Bill Gates", 
         "correct": 0 
        }, 
        { 
         "answer": "Steve Jobs", 
         "correct": 1 
        } 
       ] 
      } 
     ] 
    } 
] 

: 나는 그것을 할 같이 표시됩니다 JSON 형식으로 제출되어야합니다. 사용자는 옵션 목록에서 정답을 선택할 수도 있습니다.

여기는 JSFiddle link입니다.

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Question</button> 
      </div> 
      <div class="row"> 
      <form id="form"> 
        <!-- Nav tabs --> 
        <ul id="tab-list" class="nav nav-tabs" role="tablist"> 
         <li class="active"><a href="#tab1" tab="1" role="tab" data-toggle="tab">Question 1</a></li> 
        </ul> 

        <!-- Tab panes --> 
        <div id="tab-content" class="tab-content"> 
         <br> 
         <div class="tab-pane fade in active" id="tab1"> 
          <div class="input-group"> 
           <input type="text" class="form-control" id="question" placeholder="Your question" required> 
           <span class="input-group-btn"> 
            <button class="btn btn-success" id="add-option" type="button">Add Option</button> 
           </span> 
          </div> 
          <br> 
          <div id="options"> 
           <!--- OPTIONS --> 
           <div class="well"> 
            <textarea id="answer" class="form-control" placeholder="Your answer" required></textarea> 
            <div class="radio"><label><input type="radio" id="correct-answer" name="correct-ans-1" required>Correct Answer</label></div> 
           </div> 
           <!--- END OPTIONS --> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <button id="btn-get-json" type="submit" class="btn btn-success pull-right btn-block">Get JSON</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

myjavascript 코드를 사용하면 첫 번째 질문에서 json 만 표시되는 오류가 발생합니다. 또한 옵션 목록도 표시하지 않습니다. 내 코드에서는 양식의 모든 입력 필드를 얻기 위해 each을 사용했습니다. 그런 다음 배열을 JSON으로 변환하려면 JSON.stringify();을 사용했습니다.

$("#form").submit(function(e) { 
     var jsonArr = []; 
     var obj = {}; 

     var questionsArr = []; 
     var questionsCont = {}; 
     var tabs = $("#form :input:not(input[type='submit'],button[type='button'])"); 
     $(tabs).each(function(k,v){ 
      var id = $(this).attr("id"); 
      var value = $(this).val(); 
      questionsCont[id] = value; 
     }); 
     questionsArr.push(questionsCont); 
     obj["questions"] = questionsArr; 

     jsonArr.push(obj); 
     var json = JSON.stringify(jsonArr, null, "\t"); 
     alert(json); 
     e.preventDefault(); 
    }); 

나는 위의 게시물에서 보듯이 json 결과를 얻고 싶습니다. 코드를 테스트하려면 JSFiddle link을 참조하십시오.

도움을 주시면 감사하겠습니다. 고맙습니다!

Answer 1

먼저 ID는 고유해야하기 때문에 동일한 ID를 가진 요소를 두 개 이상 가질 수 없습니다. 새 탭을 열거 나 새 옵션을 만들면 해당 규칙을 위반하게됩니다.

따라서 ID를 클래스 및/또는 이름 ([] 사용)으로 변경해야합니다. 그래서, 입력 요소를 변경하여 이름과 다른 문제 요소를 사용하여 클래스를 사용했습니다.

내가가는 방법은 각 탭 창을 반복하여 살펴 보는 것입니다. 각 창에서 질문과 옵션을 찾아 모든 데이터를 저장할 데이터 구조에 추가하십시오. $.map을 사용하여 각 탭을 질문으로 번역합니다.

$("#form").submit(function(e) { 
    e.preventDefault(); 

    var json = {}; 
    // loop through each tab pane 
    json.questions = $('.tab-pane').map(function() { 
     return { 
      question: $('[name^=question]', this).val(), 
      // loop through each answer 
      options: $('[name^=answer]', this).map(function() { 
       return { 
        answer: $(this).val(), 
        correct: $(this).siblings('.radio').find('[name^=correct-ans]').prop('checked') 
       }; 
      }).get() 
     }; 
    }).get(); 

    alert(JSON.stringify(json, null, "\t")); 
}); 

Demo

의미가 있습니다