Javascript onclick shows last element of array with for loop

Question

I have little problem. I am working with one companys API\'s. I request for activities and they return me array of activities. Here is part of code.

client.r         


        

Answer 1

If you don't care about IE8- then ES5 already solves this issue with forEach:

activities.forEach(function(v, i){
  // now 'i' will work anywhere within this scope
});

Answer 2

This is yet another case of closure problems. Try this:

for( i=0; i<activities.length; i++) {
    (function(i) {
        // your code here
    })(i);
}

Answer 3

Move the guts of the for loop out to a function, and pass in the values that need to be scoped separately.

for(i=0; i < activities.length; i++) {
    setUpActivity(i, activities[i]);
}

---

function setUpActivity(i, activity) {

    activity.onStart(function() { alert(i+ " started"); });
    activity.onCredit(function() { alert(i+ " credit"); });
    activity.onClose(function() { alert(i+ " close"); });
    activity.onFinish(function() { alert(i+ " finish"); });
    ARNO.box.show({
        html:'<div id="socialVibeFancyBox0"></div>', 
        close: false, width:activity.window_width, 
        height:activity.window_height, 
        openjs:function(){
                    client.loadActivityIntoContainer(activity, 'socialVibeFancyBox0');
                }
            });
}

A function invocation creates a new variable scope. any variables or parameters created in the function will be in their own scope, and the functions created in the same scope will have permanent reference to those variables.