Why the data can't be pushed into the array when using promise of angularjs?

Question

the controllor:

var activeArr = [];
var activeDate = [];
var day = (endDate - startDate) / (24 * 60 * 60 * 1000);
for (var i = 1; i < day + 1; i++) {
    activeDate.push(endDate - (24 * 60 * 60 * 1000) * i);

    var start = endDate - (24 * 60 * 60 * 1000) * i;
    var end = endDate - (24 * 60 * 60 * 1000) * (i - 1);

    statisService.getRegStatis(start, end).then(function(response) {
        console.log(response.data.data); //can get data
        activeArr.push(response.data.data)
    });
}
console.log(activeArr); //nothing in the array
console.log(activeDate); // can push data into this array

the service:

userServiceModule.factory('statisService', ['$http','serverUrl', function($http,serverUrl){
    return {
        getRegStatis: function(startDate,endDate){
            var url = serverUrl +"/adminDA/dbReport?startTime="+startDate+"&endTime="+endDate;
            return $http.get(url);
        }
    };
}])

I can get the data from the service method,after this I want to push the data into an array,but there is nothing in the array,is this caused by the promise? this is the console:

Answer 1

First change your factory:

userServiceModule.factory('statisService', ['$http','serverUrl', function($http,serverUrl){
        return {
            getRegStatis: function(startDate,endDate){
                var url = serverUrl +"/adminDA/dbReport?startTime="+startDate+"&endTime="+endDate;
                return $http.get(url).then(function(result){
                      return result.data;
              });
            }
        };
    }])

Then in the controller:

var activeArr = [];
var activeDate = [];
var day = (endDate - startDate) / (24 * 60 * 60 * 1000);
for (var i = 1; i < day + 1; i++) {
    activeDate.push(endDate - (24 * 60 * 60 * 1000) * i);

    var start = endDate - (24 * 60 * 60 * 1000) * i;
    var end = endDate - (24 * 60 * 60 * 1000) * (i - 1);

    statisService.getRegStatis(start, end).then(function(data) {
        console.log(data); //can get data
        activeArr.push(data);
        console.log(activeArr); //only now you can log activeArr because you have to wait for promise
    });
}

console.log(activeDate);

$http indeed returns a promise, but you need to return it from your factory function using .then or .success

Answer 2

The problem is you are logging the array before the promise has been resolved, update your code to log the array value inside your .then callback after you have updated the activeArr array

var activeArr = [];
var activeDate = [];
var day = (endDate - startDate) / (24 * 60 * 60 * 1000);
for (var i = 1; i < day + 1; i++) {
    activeDate.push(endDate - (24 * 60 * 60 * 1000) * i);

    var start = endDate - (24 * 60 * 60 * 1000) * i;
    var end = endDate - (24 * 60 * 60 * 1000) * (i - 1);

    statisService.getRegStatis(start, end).then(function(response) {
        console.log(response.data.data); //can get data
        activeArr.push(response.data.data)
        console.log(activeArr); //now your array will be populated
});
}

console.log(activeDate); // can push data into this array

Answer 3

an $http will return you a promise - not the data. you should apply a callback after the $http call

$http.get('address').success(function(res) {
 //var res is the data sent back from the request..
// in your case it should look like
return res;
});