Question

I have two pieces of data in a multi-level array (object?) that I’m referencing in a callback function set with 2 for loops. However, I can’t figure out how to get the current loop value into the callback: it uses the last value for all callbacks.

for (k in myobj.myarr) {
    for (m in myobj.myarr[k]){
        document.addEventListener(
            k,
            function(event){
                myobj.myfn(event, myobj['myarr'][k][m][0], myobj['myarr'][k][m][1]);
            },
            true
        );
    }
}

Where myobj['myarr'][k][m][0] are strings and myobj['myarr'][k][m][1] are functions. I have a console.log in the functions, and the same function is always called (the last one).

Yes, this is probably an odd implementation, and no, I can’t use libraries. How do I get the correct values out of my array to pass into the callback functions?

Answer 1

What you really want is m bound to a context known only to one listener. For clarity’s sake, you could define a function like this:

function doEvent(k, myobj, m) {
  document.addEventListener(
    k,
    function(event){
      myobj.myfn(event, myobj['myarr'][k][m][0], myobj['myarr'][k][m][1]);
    },
    true
  );
}

…and call it for each object in your array:

for (k in myobj.myarr) {
  for (m in myobj.myarr[k]){
      doEvent(k, myobj, m);  
  }
}

Now, the events will be specific to their respective ms in the loop.