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"
            }
        ]
    }
]

Answer 1

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];