Solved

angularjs interpolate interr

Posted on 2015-01-14
2
498 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

Network it in WD Red

There's an industry-leading WD Red drive for every compatible NAS system to help fulfill your data storage needs. With drives up to 8TB, WD Red offers a wide array of solutions for customers looking to build the biggest, best-performing NAS storage solution.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Blog Template 2 31
Where do I learn ES6? 3 48
CSS Position not returning 2 46
using php variable inside javascript 5 11
Foolproof security solutions has become one of the key necessities of every e-commerce or Internet banking website. If you too own an online shopping site then its vital for you to equip your web portal with customer security features that can allow…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

943 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

8 Experts available now in Live!

Get 1:1 Help Now