Callback inside a for loop

Question

I am trying to loop over an array of devices and correctly fill a web page. But...

for (var i=0; i<t_devices.length; i++) {
            data_final = data.replace("%Title%",t_devices[i][1] );
            data_final = data_final.replace("%IP%", t_devices[i][0]);
            console.log(i);
            getStatus(t_devices[i][0], function(status) {
                console.log(i);
                data_final = data_final.replace("%Status%","<b>"+status+"</b>");
                $('#t-container').append(data_final);
            });
        }

Of course, this function is not working, as the for loop is completed before the callback function inside it, so data is messed up. Probably I am missing a trivial solution, but I am still struggling with this.

restructure your code to use recursion instead of a for loop, that will resolve your problem — Saha K P Ghoshal, Aug 01 '19 at 13:05
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — epascarello, Aug 01 '19 at 13:14
Does the order in which the rows are added to `#t-container` matter? — Thomas, Aug 01 '19 at 13:24

score 4 · Accepted Answer · answered Aug 01 '19 at 13:02

The simplest solution to this would be to create a closure around the callback, which you can do with an IIFE:

for (var i = 0; i < t_devices.length; i++) {
  data_final = data.replace("%Title%", t_devices[i][1]);
  data_final = data_final.replace("%IP%", t_devices[i][0]);
  console.log(i);
  
  (function(i, data_final) {
    getStatus(t_devices[i][0], function(status) {
      console.log(i);
      data_final = data_final.replace("%Status%", "<b>" + status + "</b>");
      $('#t-container').append(data_final);
    });
  }(i, data_final));
}

Gvz · Answer 2 · 2019-08-01T13:23:37.147

If you use ES6, just replace var i with let i in your cycle declaration.

Otherwise modify your callback function

        for (var i=0; i<t_devices.length; i++) {
            data_final = data.replace("%Title%",t_devices[i][1] );
            data_final = data_final.replace("%IP%", t_devices[i][0]);
            console.log(i);
            getStatus(t_devices[i][0], function(index, status) {
                console.log(index);
                data_final = data_final.replace("%Status%","<b>"+status+"</b>");
                $('#t-container').append(data_final);
            }.bind(null, i));
              //first argument (null) is what would be 'this' 
              //inside function when it is called, but we don't need it
              //second (i) is what will be passed into callback as first argument
              //all other arguments will be passed as second, third and so on
        }

score 0 · Answer 3 · answered Aug 01 '19 at 13:02

Why don't you store the result of the first loop and work it after first loop has finished ?

let deviceStatusToWork = [];
for (let i=0; i<t_devices.length; i++) {
            data_final = data.replace("%Title%",t_devices[i][1] );
            data_final = data_final.replace("%IP%", t_devices[i][0]);
            console.log(i);
            deviceStatusToWork.push(t_devices[i][0])            
        }

for (let i = 0; i < deviceStatusWork; i++) {
getStatus(deviceStatusWork[i], function(status) {                
                data_final = data_final.replace("%Status%","<b>"+status+"</b>");
                $('#t-container').append(data_final);
            });
}

score 0 · Answer 4 · answered Aug 01 '19 at 13:11

I guess, if getStatus() returns a Promise, you can use async/await :

const myFunc = async () => {
    for (var i=0; i<t_devices.length; i++) {
        data_final = data.replace("%Title%",t_devices[i][1] );
        data_final = data_final.replace("%IP%", t_devices[i][0]);
        console.log(i);
        let status = await getStatus(t_devices[i][0]);
        console.log(i);
        data_final = data_final.replace("%Status%","<b>"+status+"</b>");
        $('#t-container').append(data_final);
    }
}

const getStatus = arg => new Promise( (resolve,reject) => {
    /*do stuff with arg*/
    resolve(status);
} );

myFunc();

score 0 · Answer 5 · answered Aug 01 '19 at 13:24

0

Since you're using jquery, you can use each utility. Your logic will run inside a closure. See https://api.jquery.com/jquery.each/

Have a look at this fiddle and see it working: https://jsfiddle.net/evm39o1s/

answered Aug 01 '19 at 13:24

AlbertVanHalen

632
4
12

Callback inside a for loop

5 Answers5