Solved

angularjs interpolate interr

Posted on 2015-01-14
2
472 Views
Last Modified: 2015-01-15
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
Comment
Question by:justaphase
2 Comments
 
LVL 22

Accepted Solution

by:
ambience earned 500 total points
ID: 40550715
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
 
LVL 1

Author Closing Comment

by:justaphase
ID: 40550874
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now