How do I access an array value correctly within a callback function?

Question

I am trying to access the value of IDs[i] correctly within a function inside a loop. I have tried the following.

This method logs IDs as a string I think. I try to access it with index but it comes out undefined. See the console.log inside simpleWithAttrPrice function call.

for(i=0; i<IDs.length; i++)
        {   
            console.log("Outside of function Vendor is " + IDs[i]);//logs correctly
            var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
            simpleWithAttrPrice(optionSelectionArray, function(data) {
                //var vendor = IDs[i];
                var basePrice = parseFloat(roundDollar(data));
                //newPriceArray[vendor][colorSelected]=basePrice;
                console.log("Vendor is " + IDs);//"5,3"
                console.log("Vendor is " + IDs[i]);//undefined
                $j('.details'+IDs[i]+ ' .priceBlock').empty();      
                $j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');

            });
        }

I also tried passing ID's into the callback function but it logs "success" (literally)

for(i=0; i<IDs.length; i++)
        {   
            //var vendor = IDs[i];
            var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
            simpleWithAttrPrice(optionSelectionArray, function(data, IDs) {
                //var vendor = IDs[i];
                var basePrice = parseFloat(roundDollar(data));
                //newPriceArray[vendor][colorSelected]=basePrice;
                console.log("Vendor is " + IDs);//logs ID's as "success" ??
                $j('.details'+IDs[i]+ ' .priceBlock').empty();      
                $j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');

            });
        }

Lastly, I've also tried the following but it appends the price to the same block.

for(i=0; i<IDs.length; i++)
        {   
            var vendor = IDs[i];
            var optionSelectionArray = currentlySelectedAttributes(vendor);
            simpleWithAttrPrice(optionSelectionArray, function(data) {
                var basePrice = parseFloat(roundDollar(data));
                //newPriceArray[vendor][colorSelected]=basePrice;
                console.log("Vendor is " + vendor); //only logs this once.
                $j('.details'+vendor+ ' .priceBlock').empty();//If I take this away, appends both prices to same block      
                $j('.details'+vendor+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');

            });
        }

How do I access the array IDs correctly within the callback function?

Look at http://stackoverflow.com/questions/2853601/scope-of-variables-in-javascript-callback-functions and alternatives. This is a common issue in javascript — Toby Allen, Jun 10 '13 at 20:25
Possible duplicate: [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). Basically, all of your callbacks run after the `for` loop terminates, when `i` is at its terminal value. When each callback runs, the callback looks up the scope chain to find `i`, and each finds the same value of `i`. — apsillers, Jun 10 '13 at 20:38

score 0 · Answer 1 · answered Jun 10 '13 at 21:06

@Toby Allen Thanks! Your right about that link. For reference this works:

function sendRequest(i) {
            var optionSelectionArray = currentlySelectedAttributes(IDs[i]);
            simpleWithAttrPrice(optionSelectionArray, function(data) {
                //var vendor = IDs[i];
                var basePrice = parseFloat(roundDollar(data));
                //newPriceArray[vendor][colorSelected]=basePrice;
                console.log("Vendor is " + IDs);//"5,3"
                console.log("Vendor is " + IDs[i]);//undefined
                $j('.details'+IDs[i]+ ' .priceBlock').empty();      
                $j('.details'+IDs[i]+ ' .priceBlock').append('<span>'+formatCurrency(basePrice,"$")+'</span>');
            });
        }//end sendRequest

        for(i=0; i<IDs.length; i++)
        {   
            sendRequest(i);
        }

How do I access an array value correctly within a callback function?

1 Answers1