circular objects, illegal isArrayLike() invocation and Infinite $digest loop creating a with ngReact

Question

[UPDATED Sept, 24]

I am trying to use ngReact instead of ngRepeat to improve performance when I modify my $watched array of objects.

For each object (a map mark

Answer 1

I found a solution! The problem somehow is connected to the use of the map. In the watched array, I am not adding the Json markers, but I am adding the object marker created by MapBox.

map.featureLayer.setGeoJSON(json_markers_list);  // I pass an array of Json markers
map.featureLayer.on('layeradd', function(e) 
                {
                     var marker = e.layer;        // marker is anymore a json obj
                     ctrl.pushMarker(marker);  // marker now has a cyclic structure
                    });

The object marker created by MapBox, has a cyclic structure. For this reason, React cannot know if the old $watched array has changed since the last check, because it cannot perform isArrayLike() when cycle structure is present. So it rises an error (different in any browser) and considers the array always changed, generating the $digest infinite iteration.

My solution is using one array and one map. The array is $watched with just the information I need to display in the button

{'title': 'marker title', 'id':00001}

the map contains the real marker objects

{'00001' : {markerObj}}

and this is a working JSFiddle ! Click on a button and the marker object will be selected.

This question and solution is also poster on the forum of the official ng-react project