Question

我正在使用我的项目来创建形式的测验。我希望它以json格式提交，如下所示：

[
    {
        "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
                    }
                ]
            }
        ]
    }
]

我的表单允许用户添加＆amp;删除问题和选项。用户还可以在选项列表中选择正确的答案。

这是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.stringify();将数组转换为JSON。

    $("#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

Jquery将动态表单数据转换为json

1 个答案: