Passing a javascript array through HTML form to another js file

Question

I have this javascript code in my html.

answers.push({
    answer:$('#answer_1').val(),
    correctAnswer:$('#choice_1').is(":checked")
});
questions.push({
    questionNumber:1,
    questionType:questionType, 
    questionText:questionText,
    answers:answers
}); 
$('.hiddenField').val(JSON.stringify(questions));    

So as you could see, I have the answers array inside the questions array. I want to pass this questions array to a server side javascript file. I m trying to do that in HTML form's POST method using a hidden input as below.

<form action="/new" method="POST">
<div class = "quiz_basic">
<input type = "hidden" class = "hiddenField" name = "questions" />
</div> </form>

In the server side js file, when i try to access it using the req.body.questions param, I m getting "unexpected token u" error. This is my server side code. I m using nodejs framework.

    router.post('/new', function(req, res, next){
    var questions = JSON.parse(req.body.questions);
    console.log('Question array is ', questions);
    var answers = JSON.parse(req.body.questions.answers);
    console.log('Answer array is ', answers);
  res.send('success');
}

If I remove the answers array object from the questions array and pass only that via HTML POST method, I m able to parse it without any problem. How should I send an array which holds another array as one of its elements as one object via HTML? Can you guys help me out please?

questions.json looks like this

[{"questionNumber":1,"questionType":"radio","questionText":"Whats your name","answers":[{"answer":"Peter","correctAnswer":true},{"answer":"Dave","correctAnswer":false},{"answer":"Adam","correctAnswer":false},{"answer":"Steve","correctAnswer":false}]}]

As I said above, if I remove the "answers" array and send it, it doesn't throw an error on server side.

Thanks

Answer 1

You have valid JSON string, when you parse it var questions = JSON.parse(req.body.questions); you get Array of objects - we are good so far (there is no problem with nested Array ).

1st problem begins when you try to parse var answers = JSON.parse(req.body.questions.answers); . req.body.questions is a String at this point, and property .answers can not be accessed. SOLUTION: don't parse second time, lets use var questions which is already parsed.

2nd problem is that .answers does not belong to var answers since it is an Array . It is property of array elements . SOLUTION: lets take first array element var answers = questions[0].answers;

Try to do this:

router.post('/new', function(req, res, next){
    var questions = JSON.parse(req.body.questions);
    console.log('Question array is ', questions);
    var answers = questions[0].answers;
    console.log('Answer array is ', answers);
  res.send('success');
}

This fixes parsing problem, but not sure that initial JSON structure is correct.. What if there are multiple questions in 'questions' array, are you going to post them all in once? If yes, than some sort of looping should be involved, in order to access right answers ( var answers = questions[0].answers => questions[i].answers )