AngularFire '10 $digest() iterations reached' error when retrieving data from multiple nodes

Question

My web application uses Firebase JS and AngularJS to display a list of event registrations and the users who have registered for each event. The events and the users' data are in different database nodes.

Database:

"event_registrations" : {
    "$event_id" : {
        "$user_id" : {
           "registration_date" : "..." 
           "total_amount" : "...",
        }
    }
},

"users" : {
    "$user_id" : {
      "events" : {
        "event_id" : 1
      },
      "profile" : {
        "email" : "..."
        "name" : "...",
        // ...
      }
    },
}

Angular:

function MyController($scope, $firebaseObject) {
    // Retrieve event data
    $scope.events = scope.firebaseRef.child('event_registrations');

    // Retrieve user_data
    $scope.getUserData = function(userID) {
        var ref = $firebaseObject(scope.firebaseRef
           .child('users')
           .child(userID)
           .child('profile'));

        ref.$ref().once("value", function(dataSnapshot) {
            var data = dataSnapshot.val();
            $scope.user_data = data;
        });
    };
 }

Web page:

 <div ng-repeat="event in event_registrations">
    <table>
        <tr>
            <tr ng-repeat="(user_id, user_data) in event">
                {{getUserData(user_id)}}

                <td>{{user_data.email}}</td>
                <td>{{user_data.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

The problem is that when getUserData() is called from the web page, a 10 $digest() iterations reached error is produced and the data on the web page stops updating in realtime when it is updated in the Firebase DB.

How can this be solved? I have looked at Firebase-Util but am unsure how to specifically utilize it in this case.

score 0 · Answer 1 · answered Jul 10 '17 at 00:22

0

From Firebase Docs,

To read data at a path and listen for changes, use the on() or once() methods of firebase.database.Reference to observe events.

For updating in real time, you should be using on() method. This method is triggered once when the listener is attached and again every time the data, including children, changes.

In your case,

ref.$ref().on("value", function(dataSnapshot) {
        var data = dataSnapshot.val();
        $scope.user_data = data;
    });

answered Jul 10 '17 at 00:22

coderpc

4,119
6
51
93

Thanks, but changing it to on() still produces the '10 $digest() iterations reached' error. – user2181948 Jul 10 '17 at 00:27
1

[This answer](https://stackoverflow.com/a/17129274/7004388) might help you. Please refer all the answers which were posted in the provided link. @user2181948 – coderpc Jul 10 '17 at 00:32

score 0 · Answer 2 · answered Jul 10 '17 at 21:56

Fixed by simply returning the Firebase database reference in getUserData():

 $scope.getUserData = function(userID) {
    var ref = $firebaseObject(scope.firebaseRef
        .child('users')
        .child(userID)
        .child('profile'));

    return ref;
};

Then calling getUserData() in ng-init of the ng-repeat` element

<tr ng-repeat="(user_id, user_data) in event" ng-init="user_data=getUserData(user_id)>
      <td>{{user_data.email}}</td>
      <td>{{user_data.name}}</td>
</tr>

AngularFire '10 $digest() iterations reached' error when retrieving data from multiple nodes

2 Answers2