Iterating an array in an object in an array

Question

I'm trying to make a simple quiz and discovering my Javascript skills are a lot worse than I thought they were.

I have an array of questions:

var questions = [
{
    question: "Question1",
    choices: ["A","B","C"],
    answer: 0
},
//etc. x 5
];

This code works for inserting each questions.question into each of the 5 section h1s:

$('section h1').each(function(index) {
        $(this).text(questions[index].question);
});

But this code for inserting each questions.choices puts questions[0].choices[0] ("A") in the first li, questions[1].choices[1] ("E") in the second li, and questions[2].choices[2] ("I") in the third li of the first section. The other four sections have nothing in their lis.

$('section li').each(function(index) {
    $(this).text(questions[index].choices[index]);
});

How can I fix this so that each choice gets put in its own li for the section relevant to its question? For instance, section one h1 = Question1, lis A, B and C, section two h1 = Question2, lis D, E, F, and so on.

Edit: http://jsfiddle.net/sbv2jj9m/

Ok. Show us the input AND the expected output. Your question is difficult to understand. — Madbreaks
– Madbreaks, Commented Nov 14, 2014 at 23:29
Can you not just stick that second portion inside the first portion, and rename one of the index variables? — Zack Argyle
– Zack Argyle, Commented Nov 14, 2014 at 23:30
@Madbreaks sorry, this is what I mean: jsfiddle.net/sbv2jj9m — key
– key, Commented Nov 14, 2014 at 23:33
It's not very complicated -> jsfiddle.net/adeneo/zeLLoawz — adeneo
– adeneo, Commented Nov 14, 2014 at 23:34
Your fiddle would be a little different -> jsfiddle.net/adeneo/sbv2jj9m/1 — adeneo
– adeneo, Commented Nov 14, 2014 at 23:36

Madbreaks · Accepted Answer · 2014-11-14 23:40:11Z

You can combine your two iterators into one, and just do this:

$('section').each(function(index) {
    // Set H1 text
    $('h1', this).text(questions[index].question);
    // Set list items
    $('li', this).each(function(i){
        $(this).text(questions[index].choices[i]);
    });
});

Note that you're iterating over the <section> elements, then acting on sub elements of each. The interior iterator has its own index, i.

$(function(){

	var questions = [
	{
		question: "Question1",
		choices: ["A", "B", "C"], 
		answer: 2
	},
	{
		question: "Question2",
		choices: ["D", "E", "F"], 
		answer: 0
	},
	{
		question: "Question3",
		choices: ["G", "H", "I"], 
		answer: 1
	},
	{
		question: "Question4",
		choices: ["J", "K", "L"], 
		answer: 2
	},
	{
		question: "Question5",
		choices: ["M", "N", "O"], 
		answer: 1
	}

	];
    
    $('section').each(function(index) {
        // Set H1 text
	    $('h1', this).text(questions[index].question);
        // Set list items
        $('li', this).each(function(i){
            $(this).text(questions[index].choices[i]);
        });
	});

    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

<section>
		<h1></h1>
		<ul>
			<li></li>
            <li></li>
            <li></li>
		</ul>
</section>

elzi · Accepted Answer · 2014-11-14 23:41:24Z

Here's the approach I took. Is this close to what you're looking for? Demo here

JS

var questions = [
{
  question: "Question1",
  choices: ["A","B","C"],
  answer: 0
},{
  question: "Question2",
  choices: ["A", "B", "C", "D"],
  answer: 1
}];


questions.forEach(function (q,index) {
  var section = $('body').append('<section></section>');
  var queston = section.append('<h1>'+q.question+'</h1>');
  var choices = section.append('<ul></ul>');

  for (var i=0; i<q.choices.length; i++) {
    choices.append('<li>'+q.choices[i]+'</li>');
  }

  var answer = section.append('<span>Answer: '+q.choices[q.answer]+'</span>');

});

Neeku · Accepted Answer · 2014-11-14 23:55:59Z

0

It seems that you need to advance to the next choice and you do that by updating index with [index +1] and perhaps you'd want to put that into your on document open... So something like this:

$(document).ready(function() {
$('h1').each(function(index) {
$(this).text(questions(index + 1) + choices[index]);
}

edited Nov 14, 2014 at 23:55

Neeku

3,6498 gold badges37 silver badges44 bronze badges

answered Nov 14, 2014 at 23:50

Arjuna Guy

12 bronze badges

Collectives™ on Stack Overflow

Iterating an array in an object in an array

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related