Question

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

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

问题块
- 问题（每个问题块只有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"
                }
            ]
        }
    ]
}

一切正常，除了嵌套的＆＃34;问题块＆＃34; （1a。你的性别是什么？）。这个问题的答案也被添加到问题1中。

如何只选择当前＆＃34;问题块中的答案＆＃34;使用JavaScript或JQlite的类（我使用角度）。

应该可以嵌套我的＆＃34;问题块＆＃34;深入分类多层次。（不仅仅是示例中的1级）

如果你想测试它或查看我的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);

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

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

1 个答案: