Извлечь вложенные данные из HTML с помощью JavaScript

Question

У меня есть HTML-страница, содержащая вопросы и ответы. Я хочу извлечь данные (вопросы/ответы) со страницы HTML и поместить их в объект JavaScript.

Это классовая структура в моей HTML страницы:

• вопрос-блок
  • вопрос (только один вопрос на вопрос блока)
  • ответ (несколько ответов можно на каждый вопрос)

Это мой HTML код со структурой:

<div class="question-block"> 
    <h3>Question 1</h3> 
    <label class="question">Name</label> 
    <input type="text" class="answer" /> 

    <div class="question-block" style="margin-left:20px;"> 
     <h4>Question 1 a</h4> 
     <label class="question">What is your gender?</label> 
     <div class="radio"> 
      <input type="radio" class="answer" name="gender" id="radio-male" value="male"> 
      <label for="radio-male">Male</label> 
     </div> 
     <div class="radio"> 
      <input type="radio" class="answer" name="gender" id="radio-female" value="female"> 
      <label for="radio-female">Female</label> 
     </div> 
    </div> 
</div> 

<div class="question-block"> 
    <h3>Question 2</h3> 
    <label class="question">Occupation</label> 
    <input type="text" class="answer" /> 
</div> 
<br /> 

<button id="extract" type="button">Extract HTML data</button> 

<pre id="extract-div"></pre> 

Я хочу, чтобы создать структуру объекта в JavaScript, как это:

{ 
    "questions": [ 
     { 
      "question": "Name", 
      "answers": [ 
       { 
        "answer": "Kristof" 
       } 
      ] 
     }, 
     { 
      "question": "What is your gender?", 
      "answers": [ 
       { 
        "answer": "Male" 
       } 
      ] 
     }, 
     { 
      "question": "Occupation", 
      "answers": [ 
       { 
        "answer": "Student" 
       } 
      ] 
     } 
    ] 
} 

Все работает, для вложенной "вопрос-блок" (1a, за исключением. Какого Вы пола?). Ответ на этот вопрос также добавляется к вопросу 1.

Как выбрать только ответы, которые находятся в текущем классе вопросов с JavaScript или JQlite (я использую угловой).

Должно быть возможным разбить классы «вопрос-блок» на несколько уровней. (А не только один уровень, как в примере)

Если вы хотите, чтобы проверить его или проверить свой код JavaScript, вот моя скрипка: https://jsfiddle.net/aywxte23/

Answer 1

Я обычно не как разместить ответы, которые рекламируют некоторые JavaScript-библиотеку, которую я написал, но в этом случае она кажется подходящей, потому что я не вижу никаких указаний на использование внешних библиотек или фреймворков.

Reaper - это небольшой класс JavaScript, который я написал без зависимостей, который создаст глубоко вложенный объект из имен полей формы.

Вы могли бы приспособить это к существующему пользовательскому интерфейсу, даже с помощью AngularJS, просто изменив имя значения атрибутов в поля формы:

<div id="some-common-parent-element-or-form"> 
    <div class="question-block"> 
     <h3>Question 1</h3> 
     <label class="question">Name</label> 
     <input type="text" class="answer" name="questions[0][answers][0][answer]" /> 
     <input type="hidden" name="questions[0][question]" value="Name" /> 

     <div class="question-block" style="margin-left:20px;"> 
      <h4>Question 1 a</h4> 
      <label class="question">What is your gender?</label> 
      <input type="hidden" name="questions[1][question]" value="What is your gender?" /> 
      <div class="radio"> 
       <input type="radio" class="questions[1][answers][0][answer]" name="gender" id="radio-male" value="male"> 
       <label for="radio-male">Male</label> 
      </div> 
      <div class="radio"> 
       <input type="radio" class="questions[1][answers][0][answer]" name="gender" id="radio-female" value="female"> 
       <label for="radio-female">Female</label> 
      </div> 
     </div> 
    </div> 

    <div class="question-block"> 
     <h3>Question 2</h3> 
     <label class="question">Why do hotdogs come in packages of 10, but hotdog buns come in packages of 8?</label> 
     <input type="text" class="answer" name="questions[2][answers][0][answer]" /> 
     <input type="hidden" name="questions[2][question]" value="Why do hotdogs come in packages of 10, but hotdog buns come in packages of 8?" /> 
    </div> 
</div> 

<button id="extract" type="button">Extract HTML data</button> 

<pre id="extract-div"></pre> 

<script type="text/javascript" src="/path/to/reaper.js"></script> 

И JavaScript, чтобы это заработало:

var extractor = new Reaper(), 
    data = null, 
    element = document.getElementById("some-common-parent-element-or-form"); 

extractor.flat = false; 
data = extractor.getData(element); 

Это должно предоставить вам структуру данных, которую вы ищите.