Calling array element with index from an array inside the array JavaScript

Question

I want to make a survey app in JS and I have a the following code in the main:

for(var questionNumber in questionsAndAnswers.allQuestions){
      for(var i in questionsAndAnswers.allQuestions[questionNumber]){
        console.log(questionsAndAnswers.allQuestions[questionNumber].question);
        console.log(questionsAndAnswers[questionNumber+1]);
    } 
}

And this code in the config:

const questionsAndAnswers = {
    "allQuestions": [
        { "question": "Write your first question here",
        },
        { "question": "Write your second question here",
        },
        { "question": "Write your third question here",
      }
     ],
    "answerOne": [
        "1.This is the first answer",
        "1.This is the second answer",
        "1.This is the third answer"
        ],
    "answerTwo": [
        "2.This is the first answer",
        "2.This is the second answer",
        "2.This is the third answer"
      ],
     "answerThree": [
        "3.This is the first answer",
        "3.This is the second answer",
        "3.This is the third answer"
      ]
}

And then this comes out:

Write your first question here
undefined
Write your second question here
undefined
Write your third question here
undefined

I want to do this: when the first question is asked, only the first answers to appear, but when I call console.log(questionsAndAnswers[questionNumber+1]); Undefined appears. I tried many options, but the main problem is separating the questions from answers and dinamically adding a question + answer, when the config is changed, without changing the main . I would be very greatfull, if you could help me.

Thanks!

Answer 1

questionNumber is an integer representing index. So for the first item, questionNumber === 0 , you're trying to get the answer from questionsAndAnswers[0 + 1] === questionsAndAnswers[1] . Since there is no property "1" on your object, it's undefined.

If you want to use a data structure similar to this, I'd suggest something like:

for(var questionNumber in questionsAndAnswers.allQuestions){
  console.log(questionsAndAnswers.allQuestions[questionNumber].question);
  for(var i in questionsAndAnswers.allAnswers[questionNumber]){
    console.log(questionsAndAnswers[questionNumber][i]);
  } 
}

const questionsAndAnswers = {
  "allQuestions": [
    { "question": "Write your first question here" },
    { "question": "Write your second question here" },
    { "question": "Write your third question here" }
  ],
  "allAnswers": [
    [
      "1.This is the first answer",
      "1.This is the second answer",
      "1.This is the third answer"
    ],
    [
      "2.This is the first answer",
      "2.This is the second answer",
      "2.This is the third answer"
    ],
    [
      "3.This is the first answer",
      "3.This is the second answer",
      "3.This is the third answer"
    ]
  ]
}

However, I'd encourage you to explore different ways of organizing your data structures, as this way seems a little strange. Maybe try creating separate objects for questions and answers, or nesting answers under questions.

Answer 2

I think you should rethink your data model. Your questionsAndAnswers is an object, which means you access a question not by an integer, rather by a key ("answerOne", "answerTwo",...). Thus questionsAndAnswers[questionNumber+1] is not working. It must be something like questionsAndAnswers["answerOne"] .

However I would advise you to save the answers in your question object.

{
    "question": "Write your first question here",
    "answers": [...]
}

Answer 3

I used what Tushar said:

I suggest to store the question & answers in same object. { question: "abc", answers: ["abc", "def", ghi"], correct: 0}.

Thanks