AngularJS / Firebase : $scope data not rendering in view

Question

I'd like to display some data stored in a Firebase database. I've got no problem getting the data into the scope but it isn't displayed to the user.

    var ref = new Firebase('https://URL.firebaseio.com/users');

    $scope.users = [];

    ref.once("value", function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
            var dataUser = childSnapshot.val()
            dataUser.id = childSnapshot.key()
            $scope.users.push(dataUser);
        });
    });

The ng-inspector Chrome extension does confirm that the data is loaded into the scope.

What am I missing ?

Thanks.

Try using $scope.$apply; to have angularjs update the digest loop — sebenalern
– sebenalern, Commented Mar 29, 2016 at 14:43
Try if (!$scope.$$phase && !$scope.$root.$$phase) { $scope.$digest(); } after forEach loop — Stanislav Kvitash
– Stanislav Kvitash, Commented Mar 29, 2016 at 14:47
@inspired's answer will work. An alternative is to use AngularFire, which internally calls $timeout() whenever needed. — Frank van Puffelen
– Frank van Puffelen, Commented Mar 29, 2016 at 15:08

Abdullah Rasheed · Accepted Answer · 2016-03-29 16:23:22Z

1

Services like $http and $setTimeout automatically call $apply() method for you when making asynchronous changes to the $scopeso that the DOM will be updated. You will need to call $scope.$apply(); to trigger the $digest loop.

You could do:

var ref = new Firebase('https://URL.firebaseio.com/users');

$scope.users = [];

ref.once("value", function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        var dataUser = childSnapshot.val()
        dataUser.id = childSnapshot.key()
        $scope.users.push(dataUser);
    });
    $scope.$apply(); //let angular know to trigger $digest loop to update the DOM.
});

edited Mar 29, 2016 at 16:23

answered Mar 29, 2016 at 14:45

Abdullah Rasheed

3,7524 gold badges35 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

AngularJS / Firebase : $scope data not rendering in view

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