Issue with simple nested for loops in Javascript

Question

I am having a strange issue with nested for loops in Javascript. I want to populate an array of answers in one language then include those in another array. The issue is that when I see the output only the last iteration of the array from the inner for loop is used. I believe it is related to closures based off other answers but since I don't have multiple functions here I was not sure how this would be. Here is a JS Fiddle.

Here is the code:

var answer_array = [];
var content_array = [];
var i18n_array = ['en', 'fr', 'es'];

for (var i18nCount = 0; i18nCount < 3; i18nCount++) {

    var i18nLang = i18n_array[i18nCount];

        for (var ansIndex = 0; ansIndex < 3; ansIndex++) {
            answer_array[ansIndex] = {
                value: 'This is answer # ' + ansIndex + ' in this language ' + i18nLang
            };
        }

        console.log(i18nCount);
        console.log(i18nLang);
        console.log(JSON.stringify(answer_array,null,4));

    content_array[i18nCount] = {
        i18n: i18nLang,
        text: 'This question is in ' + i18nLang + ' language?',
        answers: answer_array,
    };
}

console.log(JSON.stringify(content_array,null,4));

It produces this:

    0
en
[
    {
        "value": "This is answer # 0 in this language en"
    },
    {
        "value": "This is answer # 1 in this language en"
    },
    {
        "value": "This is answer # 2 in this language en"
    }
]
1
fr
[
    {
        "value": "This is answer # 0 in this language fr"
    },
    {
        "value": "This is answer # 1 in this language fr"
    },
    {
        "value": "This is answer # 2 in this language fr"
    }
]
2
es
[
    {
        "value": "This is answer # 0 in this language es"
    },
    {
        "value": "This is answer # 1 in this language es"
    },
    {
        "value": "This is answer # 2 in this language es"
    }
]
[
    {
        "i18n": "en",
        "text": "This question is in en language?",
        "answers": [
            {
                "value": "This is answer # 0 in this language es"
            },
            {
                "value": "This is answer # 1 in this language es"
            },
            {
                "value": "This is answer # 2 in this language es"
            }
        ]
    },
    {
        "i18n": "fr",
        "text": "This question is in fr language?",
        "answers": [
            {
                "value": "This is answer # 0 in this language es"
            },
            {
                "value": "This is answer # 1 in this language es"
            },
            {
                "value": "This is answer # 2 in this language es"
            }
        ]
    },
    {
        "i18n": "es",
        "text": "This question is in es language?",
        "answers": [
            {
                "value": "This is answer # 0 in this language es"
            },
            {
                "value": "This is answer # 1 in this language es"
            },
            {
                "value": "This is answer # 2 in this language es"
            }
        ]
    }
]

It seems Simone Gianni answered your question properly please accept his answer by clicking the check mark...Thanks — CrandellWS
– CrandellWS, Commented Sep 5, 2014 at 23:20

Simone Gianni · Accepted Answer · 2014-09-05 23:13:41Z

2

You are reusing the same answer_array over and over again, overwriting it's 3 members.

Create a new array at every external loop iteration, instead of outside the loop.

For example :

var content_array = [];
var i18n_array = ['en', 'fr', 'es'];

for (var i18nCount = 0; i18nCount < 3; i18nCount++) {
    var answer_array = []; // Move this inside
    var i18nLang = i18n_array[i18nCount];

answered Sep 5, 2014 at 23:13

Simone Gianni

11.7k1 gold badge43 silver badges50 bronze badges

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

3 Comments

navillus Over a year ago

Thank you so much, this is exactly what the issue was.

Simone Gianni Over a year ago

Can you then accept my answer? not to be greedy, but :D

navillus Over a year ago

Yes, sorry there is a 5 minute timer delay on the accept button.

Collectives™ on Stack Overflow

Issue with simple nested for loops in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related