Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 879
  • 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 http://10.1.1.145/digicms/plugins/angular.min.js:6:450
    at Object.p (http://10.1.1.145/digicms/plugins/angular.min.js:80:480)
    at h.$digest (http://10.1.1.145/digicms/plugins/angular.min.js:110:238)
    at h.$apply (http://10.1.1.145/digicms/plugins/angular.min.js:113:362)
    at http://10.1.1.145/digicms/plugins/angular.min.js:18:270
    at Object.d [as invoke] (http://10.1.1.145/digicms/plugins/angular.min.js:35:36)
    at c (http://10.1.1.145/digicms/plugins/angular.min.js:18:178)
    at dc (http://10.1.1.145/digicms/plugins/angular.min.js:18:387)
    at Wc (http://10.1.1.145/digicms/plugins/angular.min.js:17:415)angular.js:10901 (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
        $scope.loadCart();
    }

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">
              <table>
                <tbody>
                  <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>
                      </div></td>
                    <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>
                  </tr>
                </tbody>
              </table>

Open in new window


Thx in advanced :)
0
justaphase
Asked:
justaphase
1 Solution
 
ambienceCommented:
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 = []

OR

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.
0
 
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 !
Miguel
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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