Loading asynchronous data in AngularJS

Question

I'm getting a Cannot read property of undefined error when calling a function, however the data is being displayed correctly.

According to what I've read so far, that's because of asynchronous load of data made by AngularJS and that I should use promises to avoid that.

I've searched online and Angular's documentation but I didn't understand how to use it.

I'd appreciate if someone could help me.

Currently, I have the following code:

.factory('Test', ['$resource', function ($resource) {
  return $resource('data.json');
}])

.controller('MyCtrl', ['$scope', 'Test', function($scope, Test) {

Test.get(function (data) {
  $scope.myData = data;
});

$scope.myFunction = function() {
  var min = $scope.myData.min;
  var max = $scope.myData.max;
  var diff = max - min;
  return diff;
}

}])

Here's a Plunker: http://plnkr.co/edit/3AK70uVbNSdhAIIfdkHb?p=preview

dfsq · Accepted Answer · 2016-04-27 11:10:18Z

3

You should not use $scope.myData.min until $scope.myData is populated, which as you correctly said is asynchronous so can take a moment. The simplest solution is in this case just wrap your code into if-block:

$scope.myFunction = function() {
  if ($scope.myData) {
    var min = $scope.myData.min;
    var max = $scope.myData.max;
    var diff = max - min;
    return diff;
  }
}

myFunction is going to be checked in every digest cycle so once $scope.myData is available it the function will evaluate and return diff properly.

However, much better approach would be to work with a promise object returned by resource. In this case you could do something like this:

function myFunction(myData) {
  var min = myData.min;
  var max = myData.max;
  var diff = max - min;
  return diff;
}

Test.get().$promise.then(myFunction).then(function(data) {
  $scope.myData = data;
});

and in HTML use myData without a function:

<div ng-controller="MyCtrl">
  {{myData}}
</div>

Demo: http://plnkr.co/edit/2SSk2lChkbvm5ffbHF2n?p=preview

edited Apr 27, 2016 at 11:10

answered Apr 27, 2016 at 11:03

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

5 Comments

superjim Over a year ago

I was just thinking: what if I'd want to pass a value to the function (e.g. {{myData(2)}} where 2 would be min. Then, I wouldn't be able to use your second approach, right?

dfsq Over a year ago

Then you wouldn't be able to use it, yes. However, I wouldn't recommend using functions like this, the function is going to be called many times, with possible performance issues. It's better to set scope property and use it inside of myFunction.

superjim Over a year ago

I see. But let's say I'd like something like this: plnkr.co/edit/9qv6cXs1RaOOaxhJ3U1X?p=preview - then, is there a better way than using a function like this?

superjim Over a year ago

Actually, I made some changes to the code above (plnkr.co/edit/Bi17ENfKoAelqgihEeQs?p=preview) but I wonder if it's a good practice to put calculations right into the HTML instead of writing a function for it.

dfsq Over a year ago

Yes, in this case with simple calculation it's fine.

Abhinav · Accepted Answer · 2016-04-27 11:02:35Z

0

Just define $scope.myData = {}

e.g. for your code:

angular.module('myApp', ['ngResource'])

.factory('Test', ['$resource', function ($resource) {
  return $resource('data.json');
}])

.controller('MyCtrl', ['$scope', 'Test', function($scope, Test) {
  $scope.myData = {}  // <--- That's what I have defined
  Test.get(function (data) {
      $scope.myData = data;
  });

  $scope.myFunction = function() {
      var min = $scope.myData.min;
    var max = $scope.myData.max;
    var diff = max - min;
    return diff;
  }

}])

answered Apr 27, 2016 at 11:02

Abhinav

3531 gold badge7 silver badges19 bronze badges

Comments

Murwa · Accepted Answer · 2016-04-27 11:08:06Z

-1

Your code is fine, maybe a little modification to avoid

Cannot read property of undefined error

$scope.myData = Test.get();

Then u can have

$scope.myFunction = function() {
    var min = $scope.myData.min;
    var max = $scope.myData.max;
    var diff = max - min;
    return diff || 0;
}

https://docs.angularjs.org/api/ngResource/service/$resource

answered Apr 27, 2016 at 11:08

Murwa

2,2881 gold badge21 silver badges22 bronze badges

Collectives™ on Stack Overflow

Loading asynchronous data in AngularJS

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related