Repeated element on AngularJS directive scope raising TypeError: Converting circular structure to JSON

Question

I am getting a strange error that is breaking the idea that I had. Basically I want that a directive with access to two elements, a list of Charts and one specific Chart that it is contained in the former list. Considerating the AngularJS way of data binding and my lazyness I decided to pass 2 arrays, the first one would be the list of Charts and the second one could have zero elements or only one element (the selected to be the active).

So here is the directive declaration (datatable and dimensions are used for other things and are working fine):

app.directive("viscMiddleSection", function ($timeout) {
return {
    restrict: "AEC",
    scope: { chartarray: "=", datatable: "=", dimensionsinuse: "=", activechart: "=" },
    templateUrl: "components/middlesection/templates/middle_section.html",
...

In the service I have the two arrays:

app.service('metaDataService', function ($rootScope, $q, dataHtmlService) {
this.activeChartMetadata = [];
this.chartMetadatas = [];
...

And in the controller I get those arrays using getter methods that simply return the arrays citated before:

app.controller('GraphController', ['$scope', 'dataService', 'metaDataService', 
function ($scope, dataService, metaDataService) {
    $scope.chartMetadatas = metaDataService.getChartMetadatas();
    $scope.activeChartMetadata = metaDataService.getActiveChartMetadata();
...

Finally I bind all in the html file:

<div visc-middle-section chartarray=chartMetadatas 
  datatable=dataTable dimensionsinuse=dimensionsInUse activechart=activeChartMetadata></div>

When I try this way that I explained I got the following exception while rendering the template html file:

Error: [$interpolate:interr] Can't interpolate: {{activechart}} TypeError: Converting circular structure to JSON

Strangely this error only occurs when I pass the chart's object reference to the directive, if I change the 'metaDataService.getActiveChartMetadata()' function to return a number or only the name of the selected chart everything works fine. What am I doing wrong here? I don't see any circular reference in my data, only a repeated object. In my head my scope is this way, without circular references:

scope: { chartarray: [ column_chart_obj, table_chart_obj, pie_chart_obj ], activechart:[pie_chart_obj], ...}

Can someone help me? I really don't want to pass the reference string, since this way I would have to find the chart inside the array of charts in every other directive instead of doing this only one time. Thanks and sorry about the English mistakes.

Welcome to SO. Your English is better than that of many American programmers I know. — isherwood
– isherwood, Commented Jul 5, 2014 at 21:32
do a google search of the error, results should help you analyze the circular problem. Some part of your object has a circular reference in it — charlietfl
– charlietfl, Commented Jul 5, 2014 at 22:15
Thanks for all suggestions, please read my own answer to my problem. And thanks for the greetings @isherwood :) — wfaria
– wfaria, Commented Jul 10, 2014 at 3:24

wfaria · Accepted Answer · 2014-07-10 03:23:26Z

1

Ops sorry for the later answer but I actually solved my own problem. While I was waiting for more answers here I decided to do a little refactor in my project and then I noticed that my graph object was storing a DOM-node (a graphic node used by D3 to draw the graphics). I changed it to let the directive send this node as a function parameter instead of setting it at its creation and plim plom problem solve.

So if you are having a problem like the mine, check if you are storing HTML-nodes inside of your object. I suspect that when AngularJS checks your object in the scope to see if it needs to update the directive, it finds an element that it is already inside of the directive to be updated, generating a circular reference and creating this kind of problem.

answered Jul 10, 2014 at 3:23

wfaria

317 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Repeated element on AngularJS directive scope raising TypeError: Converting circular structure to JSON

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related