1
votes

I have the following code which repeats and displays the items of cart.

<div ng-repeat="retailer in cart.getOrderedByRetailer()" >
      <ion-item>
        {{retailer.retailer_name}}
      </ion-item>
      <ion-item class="item-icon-right canasta-item canasta-height" ng-repeat="cartitem in retailer.order_items">
    {{cartitem.stockitem.product.name| limitTo: 20}}
    </ion-item>
</div>

With the following method I try to order the items in my cart but i cant do it

getOrderedByRetailer: function(){

        var ordered_order_items = this.content.items.reduce(function (map, obj) {

            if (map[obj.stockitem.retailer] === undefined) {
                //console.log(map[obj.stockitem.retailer]);
                map[obj.stockitem.retailer] = {
                    'retailer_name': obj.stockitem.retailer,
                    'order_items': []
                }
            }

            map[obj.stockitem.retailer].order_items.push(obj);
            //console.info(map);

            return map;
        }, {});

        return ordered_order_items

    }

When I run the above code, I get the Error: 10 $digest() iterations reached. Aborting! error in my console.

Can anyone help me understand what is wrong here? Much appreciate your help.

1
ng-repeat="retailer in cart.getOrderedByRetailer()" That's your problem. Don't bind it to a function, but to a property of the scope - Alon Eitan

1 Answers

3
votes

The problem is whenever getOrderedByRetailer() is executed, it's result is considered by angularjs as new one, even it looks like previous result. It is common problem, when your function returns array. So, if result of function depends on only this.content.items you can refactor your code this way:

<div ng-repeat="retailer in cart.getOrderedByRetailerResult" >
    ....
</div>

Javascript:

this.content.items = [];
//each time this.content.items are changed call getOrderedByRetailer():
this.cart.getOrderedByRetailerResult = getOrderedByRetailer();