包含“JAVASCRIPT”中的多个元素数组的对象数组

时间:2014-02-27 10:07:46

标签: javascript html dom

我正在尝试为给定的问题

创建对象

每个问题都包含一组答案,从最小值到1:到最大值:5。

HTML

<div id="displayAppendedQuestion" style="display: block;">
        <div id="questionNumber1">
            Question1 = Foo - 1 <br>  
            <input id="radioVal1.1" name="radioinput" type="radio" value="Answer 1.1 "> Answer 1.1  <br> 
            <input id="radioVal1.2" name="radioinput" type="radio" value="Answer 1.2"> Answer 1.2 <br> 
            <input id="radioVal1.3" name="radioinput" type="radio" value="Answer 1.3"> Answer 1.3 <br> 
            <input id="radioVal1.4" name="radioinput" type="radio" value="Answer 1.4"> Answer 1.4 <br> 
            <input id="radioVal1.5" name="radioinput" type="radio" value="Answer 1.5"> Answer 1.5 <br>
        </div>

        <div id="questionNumber2">
            Question2 = Foo - 2 <br>  
            <input id="checkboxVal2.1" name="checkBoxInput" type="checkbox" value="Answer 2.1"> Answer 2.1 <br> 
            <input id="checkboxVal2.2" name="checkBoxInput" type="checkbox" value="Answer 2.2"> Answer 2.2 <br> 
            <input id="checkboxVal2.3" name="checkBoxInput" type="checkbox" value="Answer 2.3"> Answer 2.3 <br> 
            <input id="checkboxVal2.4" name="checkBoxInput" type="checkbox" value="Answer 2.4"> Answer 2.4 <br> 
            <input id="checkboxVal2.5" name="checkBoxInput" type="checkbox" value="Answer 2.5"> Answer 2.5 <br>
        </div>

        <div id="questionNumber3">
            Question3 = Foo - 3  <br>  
            <input id="inputVal3" type="text" readonly="readonly" value="Answer 3.1"> <br>
        </div>

        <div id="questionNumber4">
            Question2 = Foo - 4 <br>  
            <input id="checkboxVal4.1" name="checkBoxInput" type="checkbox" value="Answer 4.1"> Answer 4.1 <br> 
            <input id="checkboxVal4.2" name="checkBoxInput" type="checkbox" value="Answer 4.2"> Answer 4.2 <br> 
            <input id="checkboxVal4.3" name="checkBoxInput" type="checkbox" value="Answer 4.3"> Answer 4.3 <br> 
            <input id="checkboxVal4.4" name="checkBoxInput" type="checkbox" value="Answer 4.4"> Answer 4.4 <br> 
            <input id="checkboxVal4.5" name="checkBoxInput" type="checkbox" value="Answer 4.5"> Answer 4.5 <br>
        </div>

    </div>

问题:

如何使用javascript为给定的输入集创建对象。

JavaSript

我没有总问题= totalQuestions

// create object for
for ( var i = 1 ; i < totalQuestions ; i++){
    inputs = document.getElementById('questionNumber'+i).getElementsByTagName('input');
    var obj = {
        question: ("QUESTION_" + document.getElementById('Ques').value),
        answertype: ("QTYPE_" + document.getElementById('surAnsType').value)
        for (var j = 0, l = inputs.length; j < l; ++j) {
            if (inputs[j].value.length) {
                options:option_arr.push(inputs[j].value);
            }
        }    
    };
    arrayOfObject.push(obj);
}

2 个答案:

答案 0 :(得分:2)

您不能在对象文字中放置for循环。

for ( var i = 1 ; i <= totalQuestions ; i++){
    inputs = document.getElementById('questionNumber'+i).getElementsByTagName('input');
    var option_arr = [];
    for (var j = 0, l = inputs.length; j < l; ++j) {
        if (inputs[j].value.length) {
            option_arr.push(inputs[j].value);
        }
    }    
    var obj = {
        question: ("QUESTION_" + document.getElementById('Ques').value),
        answertype: ("QTYPE_" + document.getElementById('surAnsType').value),
        options: option_arr
    };
    arrayOfObject.push(obj);
}

由于您的问题编号从1totalQuestionsfor测试应使用<=,而不是<

答案 1 :(得分:0)

假设JSON格式,

obj = {
    question_no: 1,
    question: "Foo 1",
    answers: [{
        answer_no: 1,
        answer: "Answer 1"
    },
    {
        answer_no: 1,
        answer: "Answer 1"
    },
    //.....
    ]
}

您的HTML中会有一些修改。

<div id="questionNumber1" class="ques">
    <span class="question">Question1 = Foo - 1</span><br/>
    <input id="radioVal1.1" name="radioinput" type="radio" value="Answer 1.1">Answer 1.1<br>
    <input id="radioVal1.2" name="radioinput" type="radio" value="Answer 1.2">Answer 1.2<br>
    <input id="radioVal1.3" name="radioinput" type="radio" value="Answer 1.3">Answer 1.3<br>
    <input id="radioVal1.4" name="radioinput" type="radio" value="Answer 1.4">Answer 1.4<br>    
</div>

您的javascript代码将是,

$('.ques').each(function(qindex) {
    var obj = {
        question_no: qindex+1,
        question: $(this).find('.question').text(),
        answers: new Array()
    };

    $(this).find('input[type="radio"]').each(function(index) {
        obj.answers.push({
            answer_no: index + 1,
            answer: $(this).val()
        });
    });
    arrayOfObj.push(obj);
});