Promise inside loop get last Item after then

Question

this is my loop:

 for(var i = 0 ; i < addresses.length ; ++i){
            var item = {}
            item = addresses[i];

            var mGeocode = null
            getGeocode(item.x,item.y).then(function (_mGeocode){
                mGeocode = _mGeocode
                console.log('mGeocode',mGeocode)
                console.log('item',item) // it shows last loop item
                if(mGeocode.results[3]){
                    item['english_province']    = mGeocode.results[3].address_components[0].long_name
                    item['english_city']        = mGeocode.results[2].address_components[0].long_name 
                }else if(mGeocode.results[2]){
                    item['english_province']    = mGeocode.results[2].address_components[0].long_name
                    item['english_city']        = mGeocode.results[1].address_components[0].long_name 
                }else{
                    alert('change your location')
                    return false;
                }

                newAddresses.push(item)
            });

        }

my console inside then print last item of my loop!! getGeocode function called a google map api

Your loop throws out `n` calls to `getGeocode`, increasing `i` each time. By the time those `getGeocode` calls are complete, the loop has long since completed. The value of `i` at this point will be whatever it was last set to (the final iteration). This article explains it well enough: [Asynchronous code inside an array loop](https://codeburst.io/asynchronous-code-inside-an-array-loop-c5d704006c99) — Tyler Roper, Feb 19 '19 at 17:32

score 4 · Accepted Answer · answered Feb 19 '19 at 17:31

This is a class problem of closure due to usage of var. Change the iterator and item to initialize using let and it would work correctly

for(let i = 0 ; i < addresses.length ; ++i){
            let item = {}
            item = addresses[i];

            var mGeocode = null
            getGeocode(item.x,item.y).then(function (_mGeocode){
                mGeocode = _mGeocode
                console.log('mGeocode',mGeocode)
                console.log('item',item)
                if(mGeocode.results[3]){
                    item['english_province']    = mGeocode.results[3].address_components[0].long_name
                    item['english_city']        = mGeocode.results[2].address_components[0].long_name 
                }else if(mGeocode.results[2]){
                    item['english_province']    = mGeocode.results[2].address_components[0].long_name
                    item['english_city']        = mGeocode.results[1].address_components[0].long_name 
                }else{
                    alert('change your location')
                    return false;
                }

                newAddresses.push(item)
            });

        }

Promise inside loop get last Item after then

1 Answers1