javascript - 使用 JavaScript 从 HTML 中提取嵌套数据

Question

我有一个包含问题和答案的 HTML 页面。我想从 HTML 页面中提取数据(问题/答案)并将其放入 JavaScript 对象中。

这是我的 HTML 页面中的类结构:

• 问题 block
  • 问题(每个问题 block 只有 1 个问题)
  • 回答(每个问题可能有多个答案)

这是我的 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"
                }
            ]
        }
    ]
}

一切正常，除了嵌套的“问题 block ”(1a。你的性别是什么？)。该问题的答案也添加到问题1中。

如何使用 JavaScript 或 JQlite(我使用的是 angular)仅选择位于当前“问题 block ”类中的答案。

应该可以将我的“问题 block ”类嵌套多层。 (不仅仅是示例中的 1 个级别)

如果您想测试它或查看我的 JavaScript 代码，这是我的 fiddle :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);

这应该会为您提供所需的数据结构。