0

I am working on a modified version of the Hot Towel template to create an Angular SPA. I am using Breeze to access my data services with kendo UI and data viz for widgets and charts.

I am facing a similar issue to the one stated in this SO post Chrome//kendoUI/jQuery: Maximum call stack size exceeded. On binding my breeze service output directly to my chart, I get a Maximum Call Stack Size exceeded error on the client with 'Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!Watchers fired in the last 5 iterations: []'

Breeze results do have circular references as the link above also indicates. I receive no issues on binding this to normal angular scope variables, but the error occurs only upon binding this to my charts. Filtering data on the client as the link suggests probably will have a performance impact. I tried a couple of replacer functions and JSON.prune as well, but they remove the data that I need to display on the charts as well :(

Is there any other fix for this?

The complete error is pasted below. Looks as though a deep copy is being performed for each property, but since there are circular references, it ends up throwing an overflow error

RangeError: Maximum call stack size exceeded
    at Object.toString (native)
    at isArray (http://localhost:61438/Scripts/angular.js:596:19)
    at isArrayLike (http://localhost:61438/Scripts/angular.js:278:27)
    at forEach (http://localhost:61438/Scripts/angular.js:324:16)
    at copy (http://localhost:61438/Scripts/angular.js:871:7)
    at copy (http://localhost:61438/Scripts/angular.js:858:23)
    at copy (http://localhost:61438/Scripts/angular.js:875:28)
    at copy (http://localhost:61438/Scripts/angular.js:858:23)
    at copy (http://localhost:61438/Scripts/angular.js:875:28)
    at copy (http://localhost:61438/Scripts/angular.js:858:23) angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
Scope.$digest angular.js:12270
(anonymous function) angular.js:12450
completeOutstandingRequest angular.js:4300
(anonymous function)

Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.2.16/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:78
(anonymous function) angular.js:78
Scope.$digest angular.js:12290
(anonymous function) angular.js:12450
completeOutstandingRequest angular.js:4300
(anonymous function)
Community
  • 1
  • 1
chirag kalyanpur
  • 122
  • 1
  • 10
  • I did finally manage to resolve this issue. I used cycle.js and modified its decycle method slightly, i.e. I was forced to create a shallow copy of each property to dissociate the _backingStore from the object. Also, assigned the _backingStore and entityAspect as null (as the code is running in strict mode). With these two changes I am able to directly bind the breeze result to my kendo controls with minimal loss of data. Not sure how effective this is when it comes to an editable control. Any inputs on this will be helpful. – chirag kalyanpur Jul 22 '14 at 07:01

1 Answers1

3

This happens because the Breeze entities have references to each other and most vendor grids don't stop iterating over the properties when binding. A fix for this is using a projection as described here -

http://www.breezejs.com/documentation/knockout-circular-references

PW Kad
  • 14,953
  • 7
  • 49
  • 82
  • Thanks Kad, this is the fix that we have currently put in to make it work, did not know that this was documented in the breeze website. Thank you for indicating this. Wanted to check if there is any other option available – chirag kalyanpur Jul 14 '14 at 07:20