Looping through array and back to beginning when reaching end

Question

I have a simple array

var answerAttribute = ['A','B','C','D'];

I have 16 list items, what I'm trying to accomplish is loop through the length of the list and regardless of if the list 2 items or 300. I'd lke to have a data attribute associated with it of A,B, C or D.

Here's what I'm working with:

var questionOption = ''; for(var i = 0; i < quizContent.length; i++) { questionOption = answerAttribute[i % answerAttribute.length]; console.log(questionOption); }

When logging this to the console, it logs A, AB, ABC, ABCD, ABCDundefined, and keeps repeating undefined until it's reached the loops conclusion. My question is what am I doing incorrectly so that it only logs one letter per loop.

What's your question? Your condition should be <, not <=. Other than that, I don't know what your specific issue is. — user9274775
– user9274775, Commented Feb 13, 2018 at 16:31
Prematurely posted, finishing the question. Sorry about that. — thelgloriouspast
– thelgloriouspast, Commented Feb 13, 2018 at 16:32
adding to @clockwork comment answerAttribute[i] should be changed to answerAttribute[i%4]otherwise you'll get index Out of bond if quizContent.length >3 — Sanchit Patiyal
– Sanchit Patiyal, Commented Feb 13, 2018 at 16:34
I guess you want sth like for(var i = 0; i < quizContent.length; i++) questionOption += answerAttribute[i % answerAttribute.length]; but its hard to tell. Please rephrase your description... — Jonas Wilms
– Jonas Wilms, Commented Feb 13, 2018 at 16:35

tverghis · Accepted Answer · 2018-02-13 16:39:03Z

2

questionOption += answerAttribute[i]

This statement is short-form for questionOption = questionOption + answerAttribute[i]. It will append the next element to questionOption in every iteration of the loop.

It looks like what you want is probably questionOption = answerAttribute[i]. This will replace the value in questionOption with the new element instead of appending it.

answered Feb 13, 2018 at 16:39

tverghis

1,00910 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

thelgloriouspast Over a year ago

Thank you for the explanation. With that said, that was exactly what I needed but however after the arrays conclusion(reach 'D'), it started outputting undefined. However, I combined your suggestion with @Jonas W and seemed to have reached a conclusion. I have updated my code to reflect. Thank you!

tverghis Over a year ago

As others have mentioned, it outputs undefined because your answerAttribute array has only 4 elements, but the value of i could be larger, depending on the length of quizContent.

Liora Haydont · Accepted Answer · 2018-02-13 16:38:44Z

1

You could simply log only the current value, like this:

var questionOption = ''; for (var i = 0; i < quizContent.length; i++) { //what is questionOption used for? questionOption += answerAttribute[i]; console.log(answerAttribute[i]); }

or if you want questionOption to refer to the current value

questionOption = answerAttribute[i]; console.log(questionOption );

answered Feb 13, 2018 at 16:38

Liora Haydont

1,2931 gold badge13 silver badges27 bronze badges

4 Comments

Sanchit Patiyal Over a year ago

You'll get undefined if quizContent.length>3

Michael Lorton Over a year ago

@SanchitPatiyal -- no Index out of Bound in Javascript!

Sanchit Patiyal Over a year ago

@Malvolio I mean't undefined :p

Liora Haydont Over a year ago

If there is no answer for the question, I guess having a undefined would make sens tbh

I wrestled a bear once. · Accepted Answer · 2018-02-13 16:43:17Z

You're looping the quizContent indexes and applying them to the answerAttribute array. I believe what you want is a nested loop...

var quizContent = Array(10); // assume you have 10 quiz questions... var answerAttribute = ['A','B','C','D']; for (var i = 0; i < quizContent.length; i++) { // generate a string for each quiz option var questionOption = ''; for (var n = 0; n < answerAttribute.length; n++) { questionOption += answerAttribute[n]; } quizContent[i] = questionOption; console.log(questionOption); } console.log(quizContent);

score 0 · Accepted Answer · 2018-02-13 16:47:20Z

Somehow I doubt that the question is actually about the logging, and is actually about the resulting string.

Either way, I'd do this without loops.

var answerAttribute = ['A','B','C','D']; var quizContent = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]; var questionOption = answerAttribute .join("") .repeat(Math.ceil(quizContent.length / answerAttribute.length)) .slice(0, quizContent.length); console.log(questionOption);

It just joins the answerAttribute into a string of characters, and repeats that string the number of times that the length of answerAttribute can be divided into quizContent.length (rounded up).

Then the final string is trimmed down to the size of the quizContent to remove any extra content from the rounding up.

Note that this approach assumes a single character per attribute. If not a single, but they're all the same length, it can be adjusted to still work.

in the spirit of functional programming.. quizContent = Array(15).fill(1)
also, he said "data-attributes" so i'm assuming he'll have to append the string as a data attribute to an element, which would require a loop
Yeah, that could be. Just wanted to give a different approach.

Collectives™ on Stack Overflow

Looping through array and back to beginning when reaching end

4 Answers 4

2 Comments

4 Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

3 Comments

Related