Why does this loop repeat the output data?

Question

So, this loop keeps repeating the output even when I tried to set the length as a variable and changing it in the inner loop.

Here's my code:

let testData = {
    'title': ['Dark knight', 'Monty python the holy grail', 'the social network'],
    'description': ['Batman yelling', 'Random stuff', 'facebook stuff']
};

generateFile(testData);

function generateFile(testData){


    for (let i =0; i < testData.title.length; i++){
        title = testData.title[i]
        for (let j = 0; j < testData.description.length; j++){
            description = testData.description[j];
            console.log(title);
            console.log(description);


        }

    }
}

and this is the output:

Dark knight
Batman yelling
Dark knight
Random stuff
Dark knight
facebook stuff
Monty python the holy grail
Batman yelling
Monty python the holy grail
Random stuff
Monty python the holy grail
facebook stuff
the social network
Batman yelling
the social network
Random stuff
the social network
facebook stuff

and it's supposed to output only one time.

Because you don't have just "this loop", you have two nested loops. Why? — melpomene, Aug 09 '18 at 19:33
Probably want to get rid of the inner loop. Not sure what you are trying to do here exactly — charlietfl, Aug 09 '18 at 19:33
Your loops are nested, so for every iteration of the outer loop, the inner loop executes completely. You want parallel loops that iterate over the two arrays simultaneously.. — ggorlen, Aug 09 '18 at 19:33

score 2 · Answer 1 · answered Aug 09 '18 at 19:36

You have a nested for loop in there

for (var i=0; i<3; i++){
    for (var j=0; j<3; j++){
        //inside two loops
    }
}

So the outer loop runs three times, but the inner loop runs three times for each outer loop. What you could do to fix it is either have a single loop like

for (let i=0; i<testData.titles.length; i++){
    console.log(testData.title[i]);
    console.log(testData.description[i]);
}

But a better option would probably be to restructure the data into objects, since the arrays are related.

let testData=[
    {
        title: 'Dark knight',
        description: 'batman yelling'
    }, ...
];

Then do

for (let i=0; i<testData.length; i++){
    console.log(testData[i].title);
    console.log(testData[i].description);
}

score 1 · Answer 2 · answered Aug 09 '18 at 19:37

The code you have does the following:

For every element in testData.title, it goes through every element in testData.description and outputs the combination of title + description.

Since you are nesting loops, this is what is expected.

If you want it to show only one description for each title, you have to choose it directly. For example:

let testData = {
    'title': ['Dark knight', 'Monty python the holy grail', 'the social network'],
    'description': ['Batman yelling', 'Random stuff', 'facebook stuff']
};

generateFile(testData);

function generateFile(testData){


    for (let i =0; i < testData.title.length; i++){
        title = testData.title[i]
        description = testData.description[i];
        console.log(title);
        console.log(description);
    }

}

This will output:

Dark knight
Batman yelling
Monty python the holy grail
Random stuff
the social network
facebook stuff

It combines element 0 from testData.title with element 0 of testData.description.

ggorlen · Answer 3 · 2018-08-09T19:43:10.340

With nested loops, for every iteration of the outer loop, the inner loop runs fully. I believe you want to iterate over the two arrays in parallel, which only requires one loop:

function generateFile(testData) {
  for (let i = 0; i < testData.title.length; i++) {
    console.log(`${testData.title[i]}: ${testData.description[i]}`);
  }
}

let testData = {
    'title': ['Dark knight', 'Monty python the holy grail', 'the social network'],
    'description': ['Batman yelling', 'Random stuff', 'facebook stuff']
};

generateFile(testData);

Note that you may wish to combine the two arrays into one array of objects, each with a title and description key-value pair. Here's a way to do that:

let testData = {
    'title': ['Dark knight', 'Monty python the holy grail', 'the social network'],
    'description': ['Batman yelling', 'Random stuff', 'facebook stuff']
};

const result = testData.title.map((e, i) => {
  return {title: e, description: testData.description[i]};
});

console.log(result);

Why does this loop repeat the output data?

3 Answers3