Dharmjeet Kumar
Dharmjeet Kumar

Reputation: 533

array of object containg multiple array of element in "JAVASCRIPT"

I am trying to create object for given set of Question

Each question contain set of answers which mat vary from minimum : 1 to maximum: 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>

Question:

How to create object for given set of input using javascript.

JavaSript

I have no of total Questions = 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);
}

Upvotes: 0

Views: 63

Answers (2)

user1741851
user1741851

Reputation:

Assuming the JSON format,

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

There will be a few modifications in your 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>

Your javascript code will be,

$('.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);
});

Upvotes: 0

Barmar
Barmar

Reputation: 781721

You can't put a for loop inside an object literal.

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

Since your question numbers run from 1 to totalQuestions, the for test should use <=, not <.

Upvotes: 2

Related Questions