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?

3 thoughts on “Unable to print items from two arrays in intervals”

Leave a Comment