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?

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

  1. 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>
    Reply
  2. You are reusing the index variable and increment it multiple times. Because the array is zero indexed you don’t want to increment the array before the first print. Then only increment it once each loop.

    Also there is an extra comma in your superhero array.

    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("index: ",index);
        console.log(arrItem);
        console.log(superheroItem);
    
        index++
    
        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>
    Reply

Leave a Comment