magician11
magician11

Reputation: 4584

How to resolve all the "Interpolation Error"s?

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

Answers (3)

gkalpak
gkalpak

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.

Possible solutions:

  1. 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.

  2. 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.

  3. 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

Yogesh Manware
Yogesh Manware

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

Mathew Berg
Mathew Berg

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

Related Questions