For loop not executing http service correctly

Question

I am trying to call an http service within a for loop through a function (callAPI). Here is my code. The problem I am having with this code is that I don't get the correct id called in the right order when the http service catches up. On the callAPI function it goes through all the calls of console.log(id) before even running one http service async request then it runs the http service calls but with the wrong order of id's..For instance I get back an array of [6,6,3] and it runs it in the order of [3,6,6]. Any help is appreciated.

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

function getItems() {
    return self.choices;
}

function callAPI(id) {
    console.log(id);

$http({
    method: 'GET',
    url: '/api/organizations/' + orgID + '/' + id + '/meal'
}).success(function (data) {
    console.log(id);
    console.log(data);
    // idLocal = id;
    angular.forEach(data, function(value,key) {
        angular.forEach(value, function(value,key) {
            angular.forEach(value, function(value,key) {

                if (key == 'description') {
                    items.push(value);
                }

                if (key == 'drop_name') {
                    self.dropName = value;
                }
            });
        });
    });

    self.choices.push({
        id: id,
        choice: items,
        dropname: self.dropName
    });

    items = [];

    getItems();

}).error(function (data) {
    console.log('failed');
});
}

Just because you issue requests in order, does not mean that they will return in order. If you truly need this to run synchronously, you should use promises and callbacks. — mhodges
– mhodges, Commented Jan 10, 2017 at 21:15
Yes, I will be doing some reading into promises shortly. I have been reading about callbacks a lot lately. Thanks for your input! — wowzuzz
– wowzuzz, Commented Jan 10, 2017 at 21:24

user2263572 · Accepted Answer · 2017-01-10 21:19:59Z

2

I prefer to do something like this but there are multiple other solutions:

//set index
var index = 0;
function callAPI(id) {
    //increment index
    index++
    $http({
        method: 'GET',
        url: '/api/organizations/' + orgID + '/' + id + '/meal'
    }).success(function (data) {
        //call function again with next index if exists
        if (index <= idArray.length) {
            callAPI(idArray[index])
        }

    }).error(function (data) {
        console.log('failed');
    });
}
//call function with 0 index
callApi(idArray[index])

This will run one async request, when that is returned then run the next. You can of course handle the return data any way you want. Also, as mentioned using the promise library included with angular "q" is another good option.

edited Jan 10, 2017 at 21:19

answered Jan 10, 2017 at 21:15

user2263572

5,6165 gold badges40 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mhodges Over a year ago

Probably less intuitive than chaining, but certainly one way to do it.

wowzuzz Over a year ago

Thank you so much for your solution.

Collectives™ on Stack Overflow

For loop not executing http service correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related