• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 982
  • Last Modified:

angularjs interpolate interr

Hello experts,

I have a function to load the items of the Webstore Cart.
And i use the same function to calculate the total amounts. I call the sub-function "$scope.getTotal" in 3 places in the same page. and i get like 22 times this error:
Error: [$interpolate:interr] http://errors.angularjs.org/1.2.28/$interpolate/interr?p0=%20Cart%20(%7B%7B…%20&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
    at Error (native)
    at Object.p (
    at h.$digest (
    at h.$apply (
    at Object.d [as invoke] (
    at c (
    at dc (
    at Wc ( (anonymous function)angular.js:7821 (anonymous function)angular.js:8837 pangular.js:13155 h.$digestangular.js:13624 h.$applyangular.js:1329 (anonymous function)angular.js:4222 dangular.js:1318 cangular.js:1363 dcangular.js:1298 Wcangular.js:20798 (anonymous function)jquery.js:974 firejquery.js:1084 self.fireWithjquery.js:406 jQuery.extend.readyjquery.js:83 DOMContentLoaded

Open in new window

I don't know why i get all those errors!... i mean, the page renders ok and the getTotal function returns the correct values as well as the items when i use ng-repeat.. so why all these errors? How could to this better?

My angular function is this
    function sql_basket($scope, $http) {
        $scope.loadCart = function () {
            var site = "<?php echo BASE_URL; ?>";
            var page = "ajax_sql/sql_basket.php?param=" + $scope.param;
            $http.get(site + page)
            .success(function (response) {
                $scope.cartproducts = response;

        // Get the total
        $scope.getTotal = function () {
            var total = 0;
            for (var i = 0; i < $scope.cartproducts.length; i++) {
                var cproduct = $scope.cartproducts[i];
                total += (cproduct.edebito * cproduct.qtt);
            return total;

        //initial load

Open in new window

And this is one of my calls. I call first the getTotal and then the ng-repeat with the items cart:
      <div class="nav navbar-nav navbar-right hidden-xs" ng-controller="sql_basket" id="obj_sql_basket">
        <div class="dropdown  cartMenu "> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-shopping-cart"> </i> <span class="cartRespons"> Carrinho ({{ getTotal() | currency: "&euro;" }}) </span> <b class="caret"> </b> </a>
          <div class="dropdown-menu col-lg-4 col-xs-12 col-md-4 ">
            <div class="w100 miniCartTable scroll-pane">
                  <tr class="miniCartProduct" ng-repeat="cart in cartproducts">
                    <td style="width:20%" class="miniCartProductThumb"><div> <a href="product-details.html"> <img ng-src="{{cart.function_imagemprincipal}}" alt="img"> </a> </div></td>
                    <td style="width:40%"><div class="miniCartDescription">
                        <h4> <a href="product-details.html"> {{cart.design}} </a> </h4>
                        <span class="size" style="display:none;"> 12 x 1.5 L </span>
                        <div class="price"> <span> {{cart.edebito | currency: "&euro;"}} </span> </div>
                    <td  style="width:10%" class="miniCartQuantity"><a > X {{cart.qtt | number}} </a></td>
                    <td  style="width:15%" class="miniCartSubtotal"><span> {{cart.qtt * cart.edebito | currency: "&euro;"}} </span></td>
                    <td  style="width:5%" class="delete"><a  href ng-click="delProduct(cart.rstamp);"> x </a></td>

Open in new window

Thx in advanced :)
1 Solution
The error is self-suggestive

Cannot read property 'length' of undefined

To me this looks like a race condition, because the ajax call will complete asynchronously and set cartproducts to something other than "undefined", but the getTotal can get called before that.

Initialize cartproducts
$scope.cartproducts = []


Enclose the calculation of total inside a check for cartproducts, something like

if (angular.isDefined($scope.cartproducts)) {

Open in new window

Another way might be to make sure the Totatl part isnt displayed if its not available.
justaphaseAuthor Commented:
Your a genius ambience :)

I didn't realized that the first line of the error was actually an error, lol.
And even if i did, i don't know if would get it...

I initialized the $scope.cartproducts as an empty array like you said and worked perfectly.

Thx mate !
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now