How can I sort a FirebaseListObservable list in Angularfire2 Angular2?

Question

I want to get all users from a Firebase realtime database and sort them by a score property. I've got this to work using the variable
users: FirebaseListObservable<any[]>;
but I get the errors:

Type 'Observable<any[]>' is not assignable to type 'FirebaseListObservable<any[]>'.
Property '_ref' is missing in type 'Observable<any[]>'.

If I change the variable to
users: Observable<any[]>;
then the errors go away, but then I can't use the Angularfire methods like .push() and .update().

My fetching and sorting code (which works) looks like:

this.users = this.af.database.list('/users')
  .map(items => items.sort((a, b) => b.score - a.score));

I would appreciate any advice on how this should be done to avoid the errors, or any preferred way, thank you!

Community · Accepted Answer · 2017-05-23 12:17:36Z

11

The FirebaseListObservable implements lift, so RxJS operators - like map - will return a FirebaseListObservable instance.

It's just that - when using TypeScript - the RxJS operators are statically typed to return Observable, so you have to cast to FirebaseListObservable. (Using RxJS does not have to involve TypeScript and if you look at the guidance for adding operators you will see that types are not mentioned.)

You can verify that a FirebaseListObservable instance is returned by looking for the push and update functions you mentioned in your question:

this.users = this.af.database
  .list('/users')
  .map(items => items.sort((a, b) => b.score - a.score)) as FirebaseListObservable<any[]>;
console.log(this.users.push.toString());
console.log(this.users.update.toString());

Note, however, that this will not work for FirebaseListObservable instances that are created as queries. There is an as-yet-unanswered question regarding such instances.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Aug 25, 2016 at 4:36

cartant

58.6k17 gold badges169 silver badges201 bronze badges

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

5 Comments

Sam Over a year ago

@LindsayWard This is done on the client side. For large set of data, you might want to sort on the server side. Angularfire2 support a 2nd parameter in list() for sort by.

Lindsay Ward Over a year ago

Thanks @Sam. Good to know. I'll try that as well and see if I notice any difference.

Richard Over a year ago

I get the following error: [ts] Property 'map' does not exist on type 'FirebaseListObservable<any[]>'. Any ideas please? I am using: "angularfire2": "^2.0.0-beta.7-pre", and "firebase": "^3.6.4", More details: stackoverflow.com/questions/41550132/…

alltej Over a year ago

@sam i added the sortBy in the query parameter. how can i specify the sorting - desc or asc?

Setu Kumar Basak Over a year ago

@Sam, can i use any sort function in the 2nd parameter in list()? Can you please see this quesion stackoverflow.com/q/50112214/4299527 ?

Александр Белов · Accepted Answer · 2017-04-07 01:01:17Z

2

You need this example. To watch other opts see Query interface.

this.items = angularFire.database.list('/users', {
  query: {
    orderByChild: 'childPropertyName'
  }
});

export interface Query {
    [key: string]: any;
    orderByKey?: boolean | Observable<boolean>;
    orderByPriority?: boolean | Observable<boolean>;
    orderByChild?: string | Observable<string>;
    orderByValue?: boolean | Observable<boolean>;
    equalTo?: any | Observable<any>;
    startAt?: any | Observable<any>;
    endAt?: any | Observable<any>;
    limitToFirst?: number | Observable<number>;
    limitToLast?: number | Observable<number>;
}

answered Apr 7, 2017 at 1:01

Александр Белов

212 bronze badges

1 Comment

Dumbo Over a year ago

Error:

Argument of type '{ query: { orderByChild: string; }; }' is not assignable to parameter of type 'QueryFn'.   Object literal may only specify known properties, and 'query' does not exist in type 'QueryFn'

Collectives™ on Stack Overflow

How can I sort a FirebaseListObservable list in Angularfire2 Angular2?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related