jQuery將動態表單數據轉換為json

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
                    }
                ]
            }
        ]
    }
]

我的表格允許用戶添加和刪除問題和選項。 用戶還可以在選項列表中選擇正確的答案。

這是JSFiddle鏈接 。

<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>

使用我的JavaScript代碼，我遇到一個錯誤，該錯誤僅顯示第一個問題的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鏈接 。

任何幫助表示贊賞。 謝謝！

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"));
});

演示版