Looping through a nested array, inside an object, inside an array, and pushing into HTML li element-CodePudding

I'm trying to create a timed quiz for a bootcamp challenge I'm taking. I'm stuck on a part where I need to get access of my "questions" array, in which contains 5 "question" objects and an "answers" array inside each object as well as another key named correctAnsw which contains the correct answer to the question, as seen in the code below(i've snipped it down to just one of the questions/answers but there are currently 5.) I'm not sure if this is even the correct way of storing my questions for my quiz but this is what I've done so I'd like to know if this is bad practice or not.

The issue I'm facing right now is I need to dynamically create li objects which contain the "answers" to my question so then I can move on and do things like checking if it's the correct answer etc.

var questions = [
  {
    question: "What is a string in javascript?",
    answers: [
        "Something that lets you put words",
        "Something that lets numbers",
        "A type of function",
        "A property of the DOM"
    ],
    correctAnsw: "Something that lets you put words"
  }];

function renderQuestions(){
    questionTitle.innerHTML = "";
    questionChoices.innerHTML = "";
    for(var o in questions){
       
         
       let qst = document.createElement("li");
      questionChoices.append(qst);
    qst.innerHTML = questions[o];    }

}

Currently this just displays li's with [object Object]. I'm really not sure where to go from here so any help would be appreciated. thanks. also don't pay too much attention to the content of the questions lol I will revist this once I've finished what I need to do

CodePudding user response：

function renderQuestions(){
    questionTitle.innerHTML = "";
    questionChoices.innerHTML = "";

    for(var o in questions){
       let qst = document.createElement("li");
       qst.innerHTML = questions[o].question;
       questionChoices.append(qst);
    }
}

questions[o] is an object and not a string. When an object is converted to string, it becomes [object, object]. So you will have to specify a string property inside it.

If you are trying to create answers inside the qst? the you would have to loop for the answers array and create the elements.

function renderQuestions(){
    questionTitle.innerHTML = "";
    questionChoices.innerHTML = "";

    for (var o in questions) {
       questionTitle.innerHTML = questions[o].question
       questions[o].answers.forEach(ans => {
          let qst = document.createElement("li");
          qst.innerHTML = ans;
          questionChoices.append(qst);
       })
    }
}

But remember, it will change the questionTitle on each iteration and add all the options together.

If this is to display individually, then the code needs to add all elements dynamically as,

var questions = [
  {
    question: "What is a string in javascript?",
    answers: [
        "Something that lets you put words",
        "Something that lets numbers",
        "A type of function",
        "A property of the DOM"
    ],
    correctAnsw: "Something that lets you put words"
  }
];

function renderQuestions() {
  const q = document.getElementById('questions')

  for (var o in questions) {
    const questionTitle = document.createElement('div');
    const questionChoices = document.createElement('ul');
    questionTitle.innerHTML = questions[o].question
    
    questions[o].answers.forEach(ans => {
      let qst = document.createElement("li");
      qst.innerHTML = ans;
      questionChoices.appendChild(qst);
    })
    
    q.appendChild(questionTitle)
    q.appendChild(questionChoices)
  }
}

renderQuestions();

<div id="questions"></div>

CodePudding user response：

I agree with the last answer. You probably thought that by typing questions[0] you're accessing the object keys you've created, but thats not the case. You've created an array of objects, with just one object in this case. So questions[0] is the entire object, you have to loop through it as Mohan showed you. Let me know if it helped. Happy coding!

CodePudding user response：

Is this what you want ?

forEach is easiest way to loop throw an nested array.

var questions = [
  {
    question: "What is a string in javascript?",
    answers: [
        "Something that lets you put words",
        "Something that lets numbers",
        "A type of function",
        "A property of the DOM"
    ],
    correctAnsw: "Something that lets you put words"
  },
  {
    question: "What is an array of objects in javascript?",
    answers: [
        "Something that lets you put words",
        "Something that lets numbers",
        "A type of function",
        "A property of the DOM"
    ],
    correctAnsw: "Something that lets you put objects on array"
  }
  ];

function renderQuestions(){
        
    questions.forEach(function (qst) {
      let questionTitle = document.createElement("h3");
      questionTitle.innerHTML = qst.question;
      document.getElementById("questions").appendChild(questionTitle);
   
        qst.answers.forEach(answer => {
          // Create an "li" node:
          let node = document.createElement("li");
          let textnode = document.createTextNode(answer);
          node.appendChild(textnode);
          document.getElementById("questions").appendChild(node);
          //questionChoices.append(qst);
       })
    });
}
renderQuestions();

<div id='questions' >
</div>