Accessing array outside Ajax created in success callback

Question

I have an CSV parsing function in JavaScript which gets data (movie names) from CSV and gets data using Ajax call in loop.

movies = new Array();

for (var i = 1; i < allData.length; i++) {
    var mName = allData[i][0];
    var mPath = allData[i][1];
    // console.log(decodeURIComponent(mName));

    $.get(apiCall, function showData(data) {
        if (data) {
            mData = data.results;
            if (mData.length > 1) {
                var urlData = new URLSearchParams(this.url);
                var movie_name = urlData.get('query');
                movies.push(movie_name);
            }
        }
    })
}

If data got more then one record for any movie it will save it as a conflict in array.

Problem is, I can access movies array inside inner if (but it is in iteration so I can't use that) and at loop end it is not accessible. How can I access that?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Feb 17 '17 at 07:16
Its not a good practice to use ajax with in loop. you should study about aync library. pretty helpful for handling async data. https://github.com/caolan/async — Deepak Sharma, Feb 17 '17 at 07:18

score 3 · Accepted Answer · answered Feb 17 '17 at 07:27

You should not make api calls inside a for loop. Instead do this,

   movies = new Array();

    function makeApiCallForEntireArray(index, arr, cb){
        if(arr.length == index){
           cb(true);
           return;
        }

        $.get(apiCall, function showData(data) {
        if (data) {
            mData = data.results;
            if (mData.length > 1) {
                var urlData = new URLSearchParams(this.url);
                var movie_name = urlData.get('query');
                movies.push(movie_name);
            }
        }
        makeApiCallForEntireArray(index+1, arr, cb);
    })
    }

    makeApiCallForEntireArray(0, allData, function(){
       //api calls finished
       //movie accesssible here with all the data
    });

Hi, Thanks for correction movies are accessible but please guide me why it is taking more time in processing then calls. — nOmi, Feb 17 '17 at 07:39
Right now, `makeApiCallForEntireArray` is making a call only when response from previous call has been returned, so there will only one network call at any moment. In this way data in movies will be in sequence and all calls will be done when `makeApiCallForEntireArray` calls `return`. — Anurag Awasthi, Feb 17 '17 at 07:45

score 0 · Answer 2 · answered Feb 17 '17 at 07:21

0

You will not be able to access the content added in movies array at the end of the loop because ajax requests are still in progress. You need to do this some other way so that you can be sure that its end of asynch ajax calls.

answered Feb 17 '17 at 07:21

Tahir Mehmood

71
5

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

Im going to use the answer of @Jaromanda X in my question here Can't get the summation in for loop

Promise.all(allData.map(function(d) {
     return $.get(apiCall, function showData(data){
        return data.results;
     });
})).then(function(res) {
    //push your movies here...the result of your apiCall is inside the res variable
});

edited May 23 '17 at 10:29

Community

1
1

answered Feb 17 '17 at 07:27

pryxen

381
2
22

Accessing array outside Ajax created in success callback

3 Answers3