Updating array after $http request not working

Question

ng-repeat in md-sidenav

<md-list>
        <md-list-item ng-repeat="it in cars">
              {{ it.name }}
        </md-list-item>
</mdlist>

Car Controller

    self.refreshUI = function(select) {

        carService.getAllCars()
            .then(function (res) {

                $scope.cars = carService.carsList;
                console.log($scope.cars);


            }, function (err) {
                //error
            })

    };

    // Load all registered cars
    self.refreshUI(null);

Above code runs when controller is loaded (last line) and it's working fine. But when I create new car (cars are stored in mysql db) and I want to update $scope.cars array by self.refreshUI() function it will not work until refreshing page mannualy.

console.log($scope.cars) from refreshUI function returns correct result but console.log(angular.element($0).scope().cars) gives wrong array (without new cars)

Car Service

    function carService($q, $http) {

        var cars = this;
        cars.carsList = {};

        cars.getAllCars = function() {
            var defer = $q.defer();

            $http.get("http://car.app/getCars")
                .success(function(res) {
                    cars.carsList = res;
                    defer.resolve(res);
                })
                .error(function(err, status){
                    defer.reject(err);
                });

            return defer.promise;

        };

        return cars;
}

Where could be the problem?

//edit: $rootScope is working fine but i still want to use $scope

Are you 100% sure the cars scope is in the right ng-controller — Fergus
– Fergus, Commented May 15, 2016 at 0:04
I'm fairly certain a digest cycle is supposed to fire on .resolve call, but just to make sure, if you throw in a "$scope.$apply()" after you set the $scope.cars variable, does it update, correctly? I'm not saying this is the proper solution, but rather a debugging suggestion. — sourdoughdetzel
– sourdoughdetzel, Commented May 15, 2016 at 0:21
There is only one controller and $scope.$apply() gives me error "$digest already in progress" — user3364397
– user3364397, Commented May 15, 2016 at 0:30
Are you certain you call the refreshUI function? And if so, does carService.carsList have the new cars — John Smith
– John Smith, Commented May 15, 2016 at 1:11
I just tried $rootScope and its working. I have no idea why $scope is not... — user3364397
– user3364397, Commented May 15, 2016 at 1:24

jpietzsch · Accepted Answer · 2016-05-15 00:40:55Z

3

Why aren't you using a returned Promise as a result from the $http call? Besides of a better code style, it could solve your problem. With that kind of service-controller infrastructure I never had 'binding problems' like that.

function carService($q, $http) {

    var cars = this;
    cars.carsList = {};

    cars.getAllCars = function() {
        return $http.get('http://car.app/getCars').then(function (response) {
            cars.carsList = response.data;
            return response.data;
        });
    };

    return cars;
}

In your controller you could then do something like that:

self.refreshUI = function() {

    carService.getAllCars()
        .then(function (data) {
            // just obtain the promise data
            $scope.cars = data;
        }, function (err) {
            // error handling
        });

};

self.refreshUI();

answered May 15, 2016 at 0:40

jpietzsch

5365 silver badges18 bronze badges

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

3 Comments

user3364397 Over a year ago

I tried it this way and even without service and still having problems.

jpietzsch Over a year ago

Can you define those problems? Is your browsers console giving some output? Did you trying to log the result of the $http call to the console?

jpietzsch Over a year ago

When it gets a result there, try to log the same from the service-call in the controller. Also log the error functions to check if they will be executed to determine if the HTTP request is not OK.

Collectives™ on Stack Overflow

Updating array after $http request not working

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related