?
Solved

angularjs interpolate interr

Posted on 2015-01-14
2
Medium Priority
?
711 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 22

Accepted Solution

by:
ambience earned 2000 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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
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.
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
Suggested Courses

752 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