Unable to print items from two arrays in intervals

So I have two arrays with the same number of items in each of them. I have been trying to print those items in intervals in the console. Something like this:

1
Bruce Wayne
45

Then after a one second interval it will print:

2
Clark Kent
43


and so on till the last item. 

It will stop when all the items have been printed.

Right now I get something like this:

1
Clark Kent
43


3
undefined

So here is the code I tried:

const superheroes = [
    {
        "name": "Bruce Wayne",
        "age": 45
    },
    {
        "name": "Clark Kent",
        "age": 43
    },
    {
        "name": "Oliver Queen",
        "age": 41
    },
    ,
    {
        "name": "Barry Allen",
        "age": 25
    }
];

const arr = [
    '1',
    '2',
    '3',
    '4'
];
const startBtn = document.querySelector('#start');
let index                       = 0;


$(startBtn).click(() => {
        const interval = setInterval(() => {
            const arrItem       = arr[index++];
            const superheroItem = superheroes[index++];
            
            console.log(arrItem);
            console.log(superheroItem);

            if(index == arr.length){
                clearInterval(interval);
            }
        }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">Start</button>

How can I fix it?

Answer

Basically, you need to increment your index after the code. Try to re-write this code with some kind of loop on the superheroes collection.

const superheroes = [
    {
        "name": "Bruce Wayne",
        "age": 45
    },
    {
        "name": "Clark Kent",
        "age": 43
    },
    {
        "name": "Oliver Queen",
        "age": 41
    },
    {
        "name": "Barry Allen",
        "age": 25
    }
];

const arr = [
    '1',
    '2',
    '3',
    '4'
];
const startBtn = document.querySelector('#start');
let index                       = 0;


$(startBtn).click(() => {
        const interval = setInterval(() => {
            let arrItem       = arr[index];
            let superheroItem = superheroes[index];
            
            console.log(arrItem);
            console.log(superheroItem);

            if(index === arr.length - 1){
                clearInterval(interval);
            }
            
            index ++;
        }, 1000);
       
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">Start</button>

Leave a Reply

Your email address will not be published. Required fields are marked *