Question

我期待以下格式的json数据来自表单 -

{
    courseId: 4,
    lectureId: 5010,
    popupTime: 3,
    questions: [
        {
            title: "Which is the Capital of India 2",
            _id: "5450dff18f7cde8b4ed4ae3d",
            answers: [
                {
                    answer: "Delhi",
                    correct: true,
                },
                {
                    answer: "Bangalore",
                    correct: false,
                },
                {
                    answer: "Mumbai",
                    correct: false,
                },
                {
                    answer: "Chennai",
                    correct: false,
                }
            ]
        },
        {
            // second object in questions array.
        }
    ]
}

如何在前端设计表单，以便用户可以输入问题（可以是多个）然后可以输入与该问题相关的答案。我甚至想在answer对象中存储一些指示它是否存在是否正确答案。（通常来自checkbox或radio button）。

到目前为止，我已经尝试过了 -

 <form id="aj">
            <input type="text" name="questions[][title]" value="" placeholder="Question Title">
                <input type="text" name="answers[]" value="" placeholder="Answer 1">
                <input type="text" name="answers[]" value="" placeholder="Answer 2">
                <input type="text" name="answers[]" value="" placeholder="Answer 3">
                <input type="text" name="answers[]" value="" placeholder="Answer 4">
            <button>Send</button>
        </form>

$( "#aj" ).submit(function( event ) {
        event.preventDefault();

        var o = {};
        var a = $( "#aj" ).serialize();

       $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        console.log(o);
  });

所以在序列化后我得到了 -

{ 
  questions: [ { title: 'Question 1' } ],
  answers: [ 'answer 1', 'answer 2', 'answer 3', 'answer 4' ] 
}

但我需要问题是array of object个问题。每个问题对象都有一系列答案。

有关如何实现这一目标的任何指示？

Answer 1

您可以通过在标记中使用类和/或数据属性来简化此操作，并为初始对象提供更好的定义。

HTML

<form id="aj">
    <div class="question">
        <input type="text" class="title"  value="" placeholder="Question Title" />
        <input class="answer" type="text" value="" placeholder="Answer 1" />
        <!-- other answers -->
        <div class="correct">
            <label>
                <input type="radio" name="correct_1" value="0" />1</label>
           <!-- other radios -->
        </div>
    </div>
    <button>Send</button>
</form>

JS

$("#aj").submit(function (event) {
    event.preventDefault();

    var o = { questions: []};
    $('div.question').each(function (qIndex, qElem) {
        var answers = $(this).find('.answer').map(function () {
            return this.value;
        }).get();
        o.questions.push({
            title: $(this).find('.title').val()
            correct: $(this).find('.correct :radio:checked').val(),
            answers: answers
        });
    });

    console.log(o);
});

的 DEMO

将嵌套和复杂的表单数据转换为JSON

1 个答案: