Reputation: 4584
I'm getting a lot of interpolation errors that look like
Error: [$interpolate:interr] http://errors.angularjs.org/1.2.17/$interpolate/interr?p0=%20%7B%7BcalcPric…7D%7D%20&p1=TypeError%3A%20Cannot%20read%20property%20'0'%20of%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:6:450
at Object.r (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:79:446)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:108:321)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:111:451)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:18:303
at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:34:479)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:18:211)
at dc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:18:420)
at Wc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:17:491)
My code is here https://github.com/magician11/bitcoin-rate-assessor/blob/master/js/bitcoin.js
and the demo is here http://bitcoin.golightlyplus.com/
Basically, I am getting data from other APIs. And my code is using the data structures that will contain the external data before they get populated.
So the demo will resolve itself in that it will show things correctly after a few seconds. But what is the best way to fix my code so I am not running into these errors?
Some dummy data for initialising those data structures? I started experimenting with using angular.isDefined()
but I felt like it started getting a little messy adding that declaration in too many places.
Thanks.
Upvotes: 1
Views: 8432
Reputation: 48212
The problem seems to be that you are trying to access data like this: someObj.prop1.prop2
while someObj
might look like this: someObj = {};
Thus, the above boils down to: someObj.prop1.prop2 === {}.prop1.prop2 === undefined.prop2
which causes an error to be thrown.
If your code access properties two (or more) levels deep you need to handle the situation where the data has not been initialized yet.
Change code like the above to: (someObj.prop2 || {}).prop1
Pros: It is an easy and quick fix. Good for when it is only sporadically needed in your code.
Cons: Clutters code. Tedious and ugly when you have to use all over the place.
Initialize the data to contain empty object for all properties (or the ones that are causing the errors). someObj = {}
will become someObj = {prop1: {}}
Pros: You only need to fix it in one place, then it works everywhere (makes the code more clean).
Cons: You need to know the structure of the data and might become tedious if there are several nesting levels.
Make sure the functions that require the data to be loaded are not run until the data is actually there (e.g. make such functions run on the success
callback of a request).
Pros: It's probably the cleanest and most maintainable approach.
Cons: It is not always possible or requires some modification to the way your business logic is implemented.
Upvotes: 3
Reputation: 1843
If you are using something directly in html
from scope or controller and your controller is not yet initialized then use ng-if
. like
<div ng-controller="pageCtrl as ctrl">
<div ng-if="ctrl.initialized">
<td><input title="ctrl.getProperty('commonProperties.add')"
ng-change="ctrl.changed()" /></td>
...
..
</div>
</div>
Upvotes: 0
Reputation: 28750
Your error lies on line 18:
var latestUSDequivFromBcId = CurrencyConversions.convertToUSD($scope.latestAsksFromBcId[0][0], 'IDR');
It looks like either $scope.latestAsksFromBcId is undefined or $scope.latestAsksFromBcId[0] is undefined
Upvotes: 0