AngularJS view doesn't wait for $http.get

Question

In my controller I have the following...

$scope.products = dataService.getJsonData();
console.log($scope.products);

and in my dataservice I have the following

.service('dataService', function ($http) {

        this.getJsonData = function () {
            return $http.get('path/to/json/products.json').then(function (response) {

                // don't send back everything....
                var productData = response.data;
                console.log(productData);
                return productData;

            });

        };

and in my view I have the following...

<div ng-repeat="product in products">

    Name: {{ product.name }} <br>
    Price: {{ product.price }}
    <hr>
</div>

in my rendered view the repeat is showing only 3 items (products is an array of 15 objects). When looking at the console the repeat in the view or products is made of Object { then=function(), catch=function(), finally=function()} but the log from the dataservice is out putting the desired object array. I don't understand why the output isn't waiting for the returned data, I thought this was asynchronous? How can I make the view wait for the dataservice without using a $timeout. Has anyone else had this problem? Thanks in advance.

UPDATE *

From a bit of googling I'm pretty sure I need to add a resolve to my $routeProvider, the $routeProvider currently looks like so:

.when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl',
      resolve:{
        // i need to put something here...
      }
  })

I think i usually add a callback to getJSONData to update $scope, instead of returning data — Jorg
– Jorg, Commented Mar 14, 2014 at 10:47
No, what you need is $apply. I fixed your code in my answer. — bluehallu
– bluehallu, Commented Mar 14, 2014 at 10:53

Reite · Accepted Answer · 2014-03-14 10:47:18Z

5

When you call dataService.getJsonData() it doesnt return the data that the $http.get returns, it returns a promise that will be fulfilled with the data in the future. I would recommend you to read up on promises. You can read about the angular implementation here.

As I mentioned, the function returns a promise that will be fulfilled, so you need to set the data in the scope when the promise is fulfilled. Change your controller to this:

dataService.getJsonData().then(function (products) {
    $scope.products = products
})

answered Mar 14, 2014 at 10:47

Reite

1,66710 silver badges12 bronze badges

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

Comments

MentalRay · Accepted Answer · 2014-03-14 10:47:20Z

2

hmm not sure if it will help, because angular is async but try adding this to your controller before using the data.

dataService.getJsonData().success(function (response){
  $scope.products = response
})

answered Mar 14, 2014 at 10:47

MentalRay

3441 silver badge7 bronze badges

Comments

Lajos Veres · Accepted Answer · 2014-10-27 08:51:26Z

1

With $resource it is a bit easier, like this:

dataService.factory('getJsonData', ['$resource',
  function($resource) {
    return $resource('path/to/json/products.json');
  }
]);

The other parts are the same.

edited Oct 27, 2014 at 8:51

answered Mar 14, 2014 at 10:47

Lajos Veres

13.7k7 gold badges47 silver badges57 bronze badges

Comments

bluehallu · Accepted Answer · 2014-05-26 13:30:45Z

0

The actual update is happening in a callback, so you need to wrap it in $apply. Because it's happening in a service, you must use $rootscope

.service('dataService', function ($http,$rootScope) {

    this.getJsonData = function () {

        return $http.get('path/to/json/products.json').then(function (response) {
            $rootScope.$apply(function () {
                // don't send back everything....
                var productData = response.data;
                console.log(productData);
                return productData;

            })
        });     
    };

From the angular promises docs

// since this fn executes async in a future turn of the event loop, we need to wrap our code into an $apply call so that the model changes are properly observed.

Edit: As OdeToCode pointed out, this is really not needed. The reason is that what http.get returns is an Angular promise, which is already doing an $apply internally on the .then() callbacks.

edited May 26, 2014 at 13:30

answered Mar 14, 2014 at 10:47

bluehallu

10.3k9 gold badges47 silver badges64 bronze badges

1 Comment

OdeToCode Over a year ago

Well, the $apply in the promises docs is only needed because it is using a setTimeout. What Mike needs is just a call to .then.

Collectives™ on Stack Overflow

AngularJS view doesn't wait for $http.get

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related