How to loop through $firebaseArray

Question

I created an array of users like so -

var ref = new Firebase(FIREBASE_URL + '/users');
var users = $firebaseArray(ref);

I have added objects to this and I want to loop through each of the users in this array. I know this is possible in the view using ng-repeat, but I need to do it in the controller. I have tried -

angular.forEach(users, function(user) {
    console.log(user);
})

But I get no result from this.

See http://stackoverflow.com/questions/27049342/asynchronous-access-to-an-array-in-firebase/27050749#27050749. But also note the second snippet on this documentation page: https://www.firebase.com/docs/web/libraries/angular/guide/intro-to-angularfire.html#section-async-intro as it shows how best to debug data being loaded in an AngularJS/Firebase context: `
{{ data | json }}
`. `console.log` is not your best friend here. — Frank van Puffelen, May 05 '15 at 20:50
Explained in the first page of the Angular guide and asked at least ten times here on Stack Overflow. — Kato, May 06 '15 at 15:22

score 29 · Accepted Answer · answered May 05 '15 at 19:39

29

Users probably isn't loaded by then, so you'll need to wait for it:

var ref = new Firebase(FIREBASE_URL + '/users');
var users = $firebaseArray(ref);

users.$loaded()
    .then(function(){
        angular.forEach(users, function(user) {
            console.log(user);
        })
    });

Here's the docs on it: https://www.firebase.com/docs/web/libraries/angular/guide/intro-to-angularfire.html#section-async-intro

answered May 05 '15 at 19:39

Mathew Berg

28,625
11
69
90

1

Glad to help, don't forget to accept the answer and upvotr it. – Mathew Berg May 05 '15 at 20:00
I accepted the answer, but unfortunately haven't got enough rep to upvote – Ire Aderinokun May 05 '15 at 20:32

CodecPM · Answer 2 · 2015-10-20T12:16:55.973

2

var fbref = new Firebase(FIREBASE_URL + '/customers');
customers = $firebaseArray(fbref);

customers.$loaded()
.then(function(data){
    angular.forEach(data, function(value, key) {
        console.log('key='+key+', value='+value);
    })
});

edited Oct 20 '15 at 12:16

answered Sep 02 '15 at 07:44

CodecPM

423
6
18

score 0 · Answer 3 · edited May 06 '15 at 21:32

0

You can use the built-in $list attribute,
e.g. The below function counts users,

app.factory("Users", function($firebaseArray) {
  return $firebaseArray.$extend({             
    getUsers: function() {
      var user_count = 0;
      angular.forEach(this.$list, function(user) {
        user_count += 1;
        console.log(user);
      });
      return user_count;
    }
  });
})

and then to use it,

var userList = new Users(ref);
userList.$loaded().then(function() {
  userList.getUsers();
});

edited May 06 '15 at 21:32

sbolel

3,486
28
45

answered May 05 '15 at 20:08

Arup Saha

179
1
3

Note that @ArupSaha is [extending the $firebaseArray service](https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-extending-the-services) in this answer. The example is derived from the [documentation for `$firebaseArray.$extend`](https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-extending-the-services-firebasearrayextend). – sbolel May 06 '15 at 21:07

How to loop through $firebaseArray

3 Answers3

Linked