How do I iterate through FirebaseListObservable<[]> object

[kanishkatn]

Hi,

I wanna iterate through FirebaseListObservable<[]> object and create an array of objects. I am having a hard time figuring how to access the values from it.

Here is my code

users:FirebaseListObservable<IUser[]>;
this.users = this.af.database.list("/users");
        this.users.forEach(element => {
            console.log(element);
        });

This is how the object "element" looks like in the console

Please help

[mikeybyker]

Hi,
As "this.users" will get its data asynchronously from firebase, you're likely trying to iterate before the data is actually there. Depending on what you are trying to do, to iterate over the data in your code, you can add the option

preserveSnapshot: true

to your call, and subscribe to it...
eg.

this.af.database.list('/users', { preserveSnapshot: true})
    .subscribe(snapshots=>{
        snapshots.forEach(snapshot => {
          console.log(snapshot.key, snapshot.val());
        });
    })

If it is just in the template you want to show the data, you can do away with preserveSnapshot and just add the async pipe to the template

<li *ngFor="let user of users | async">
    {{ user.name }}
</li>

Not figured out how/if you can do both from a single call - like have the template bound to the property and also be able to extract the data yourself. Be nice if you could...

[kanishkatn]

Hi,
Thanks for the quick response.

I figured a way to iterate through it. I have the list of Users now.

But the problem I am having now is to handle the async call. I am calling the function from a component and not bothered about populating in the template.

So, I am calling a service function from a component which will query firebase for a list. I need the list in the component to perform some logic.

I read about Observables, but couldn't figure out a way to implement it.
Can you please help me?

[mikeybyker]

Hi, it's maybe something for stack overflow etc. rather than an issue on angularfire....

But as mentioned, it is .subscribe you want to look at - you subscribe to the data coming in, so once there's a response, you have the data and can do what you want with it.

From your service, just return the FirebaseListObservable to your component.
// eg. In your service

getUsers(){
    return this.af.database.list('/users');
}

// In your component

constructor(private _service: YourService) {

  _service.getUsers()
    .subscribe(users=>{
        // do something...
    })
}

[kanishkatn]

Got it. Thanks :)

[sean-hill]

Here is a simple example that I'm having a problem with.

Say I subscribe to a list of items:

this.items = this.af.database.list('items');

And I add to these items in another function:

this.items.push({ im: 'cool' });

Then in another function I'd like to iterate through my items:

this.items.forEach(item => {
    console.log('Item:', item);
});

I expect console.log(item) to print out $ Item: { im: 'cool' } but instead it prints out an array for each time I added to the items list.

$ Item: []
$ Item: [{ im: 'cool' }]
$ Item: [{ im: 'cool' }, { again: 'yep' }]

How do I iterate over these items? Works great in the template, but I can't get it to work in my controller.

[katowulf]

Please resubmit and follow the issue template.

[bmanderscheid]

@sean-hill did you ever figure this out? I'm having the same issue.

[sean-hill]

@bmanderscheid check out this.

[itwasnoteasy]

I had a very similar issue however, I was trying to filter on the returned FirebaselistObserverable<Item[]> on user input to get the typeahead.

I got it working by using following code:

items: FirebaseListObservable<Item[]>;
    af: AngularFire;
    filteredItems: Array<Item>;
    constructor(public navCtrl: NavController, af: AngularFire) {
        this.items = af.database.list('stores/0/items');
    }

   getFilteredItems(ev) {
        console.log(ev.target.value);
        // use subscribe and foreach for filtering
        var val = ev.target.value;
        this.items.subscribe((_items)=> {
            this.filteredItems = [];
            _items.forEach(item => {
                if( item.name.toLowerCase().indexOf(val.toLowerCase()) > -1) {
                    this.filteredItems.push(item);
                } 
            })
        });        
    }

if you are using ngFor on items in your html use async pipe like so

<span *ngFor="let item of items | async">

OR

*ngFor="let item of filteredItems"

[katowulf]

Wouldn't .map() or .mergeMap() be more appropriate here?

[itwasnoteasy]

Absolutely, .map() was my first choice. However, things didn't work as expected because of the Observable objects and list. So after I gave myself enough headache, I went old school. Then inside foreach I am actually doing

this.filteredItems.push(this.af.database.object('url...'));

This felt like an additional db call. However, things with firebase are really different and it doesn't make any real REST or DB calls, so you get same/similar performance if not better.

It would be interesting to see a .map() version working though for a concrete comparison.

[IzaskunLS]

Hi all!
I struggled trying to combine both AngularFire and Ionic VirtualScrolling (needs an array to work fine) but then found this thread explaining how to create an array of objects from FirebaseListObservable<[]>. Thanks to you I managed to combine them finally, still wondering if there is a more elegant solution

Sean-hill had the best example for the issue I was having. Of course, he was "closed" out, which seems to happen on damn near every programming forum. But thanks for your example Sean!