0

while trying to implement a cart for my eshop I have noticed that initCartId and refreshCart are called recursively, causing the project to crash.

The problem is the same with this one but this cannot help me to identify where I use recursion.

The alerts from controller.js when I go to cart page are:

initCartId!!!
refreshCart!!!
calGrandTotal!!!
calGrandTotal!!!
calGrandTotal!!!

The first 2 alerts from calGrandTotal function looks like: enter image description here

At this point I can see the StackOverFlowError at the console but the alerts continue to appear one more time with the following sequence:

initCartId!!!
refreshCart!!!
calGrandTotal!!!

cart.jsp

<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@include file="/WEB-INF/views/template/header.jsp"%>


<div class="container-wrapper">
    <div class="container">
        <section>
            <div class="jumbotron">
                <div class="container">
                    <h1>Cart</h1>

                    <p>All the selected products in your shopping cart</p>
                </div>
            </div>
        </section>

        <section class="container" ng-app="cartApp">
            <div ng-controller="cartCtrl" ng-init="initCartId('${cartId}')">
                <div>
                    <a class="btn btn-danger pull-left" ng-click="clearCart()"><span
                        class="glyphicon glyphicon-remove-sign"></span>Clear Cart</a>
                </div>

                <table class="table table-hover">
                    <tr>
                        <th>Product</th>
                        <th>Unit Price</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Action</th>
                    </tr>

                    <tr ng-repeat="item in cart.cartItems">
                        <td>{{item.product.productName}}</td>
                        <td>{{item.product.productPrice}}</td>
                        <td>{{item.quantity}}</td>
                        <td>{{item.totalPrice}}</td>
                        <td><a href="#" class="label label-danger"
                            ng-click="removeFromCart(item.product.productId)"> <span
                                class="glyphicon glyphicon-remove"></span>remove
                        </a></td>
                    </tr>
                    <!-- <tr>
                        <th></th>
                        <th></th>
                        <th>Grand Total</th>
                        <th>{{calGrandTotal()}}</th>
                        <th></th>
                    </tr> -->
                </table>

                <a href="<spring:url value="/productList" />"
                    class="btn btn-default">Continue Shopping</a>
            </div>
        </section>

    </div>
</div>

<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="<c:url value="/resources/js/controller.js" /> "></script>


<%@include file="/WEB-INF/views/template/footer.jsp"%>

controller.js

var cartApp = angular.module ("cartApp", []);

cartApp.controller("cartCtrl", function ($scope, $http){

/* corresponding to the mapper at CartController with RequestMethod.GET */
/*
 * /eMusicStore/rest/cart/'+$scope.cartId) get the cart data in Json format
 * and with the success we use another function and the JSON format cart
 * info will be stored into data and we pass into $scope
 */
$scope.refreshCart = function (cartId) {
    alert("refreshCart!!!");
    $http.get('/eMusicStore/rest/cart/'+$scope.cartId).success(function (data) {
       $scope.cart=data;
    });
};


$scope.clearCart = function () {
    alert("clearCart!!!");
    /*$http.delete('/eMusicStore/rest/cart/'+$scope.cartId).success($scope.refreshCart($scope.cartId));*/        
    $http.delete('/eMusicStore/rest/cart/'+$scope.cartId).success(function (data) {
        $scope.refreshCart($scope.cartId);
    });
};      

$scope.initCartId = function (cartId) {
    alert("initCartId!!!");
    $scope.cartId = cartId;
   /* alert("cartId:" + cartId);*/
    $scope.refreshCart($scope.cartId);
};

$scope.addToCart = function (productId) {
    alert("addToCart!!!");
    $http.put('/eMusicStore/rest/cart/add/'+productId).success(function (data) {
        /*$scope.refreshCart($http.get('/eMusicStore/rest/cart/cartId'));*/
        alert("Product successfully added to the cart!");
    });
};

$scope.removeFromCart = function (productId) {
    alert("removeFromCart!!!");
    $http.put('/eMusicStore/rest/cart/remove/'+productId).success(function (data) {
        /*$scope.refreshCart($http.get('/eMusicStore/rest/cart/cartId'));*/
        $scope.refreshCart($scope.cartId);
    });
};

$scope.calGrandTotal = function () {
    alert("calGrandTotal!!!");
    var grandTotal=0;

    for (var i=0; i<$scope.cart.cartItems.length; i++) {
        grandTotal+=$scope.cart.cartItems[i].totalPrice;
    }

    return grandTotal;
};
});
Community
  • 1
  • 1
M. Botas
  • 87
  • 1
  • 1
  • 5
  • 2
    I don't see any recursive calls in that code. – Oliver Charlesworth Apr 08 '17 at 10:10
  • This is exactly my issue too. Do you mean that recursion may be triggered somewhere else in my project? – M. Botas Apr 08 '17 at 10:13
  • Well i don't know `AngularJS` (which you should include in your tags) but inside your `refreshCart` you say `$scope.cart=data;` which for me means we have a new cart, so the `initCartId` should run again? Maybe if you change the `$scope.cart=data;` to `$scope.cart.cartItems=data.cartItems;`? – GramThanos Apr 08 '17 at 14:33
  • It was a very good idea but cannot solve my problem. I cannot understand why function initCartId is called 2 times.. I tried to remove all the refreshCart function but still initCartId is called 2 times.. But how and why ? – M. Botas Apr 10 '17 at 07:12

0 Answers0