Angularfire: How to order by date?

[justme1]

Hi,

This one must be really simple as everyone who uses Firebase must encounter this problem.

In my server I save items like this:
var db = firebase.database();
var ref = db.ref("users");
var userRef = ref.child("userA");
var newUserRef = userRef.push();
newUserRef.set({
Date : Date.now(),
Msg : 'test'
});

Now assuming I have 2 items in 'userA' I want to display the items in descending order so the last item that got 'pushed' will be the first to be displayed to the user.

I'm using:

    this.itemsFirebase = this.af.database.list('/users/userA');

And in the template:

     <li *ngFor="let itemFirebase of firebaseService.itemsFirebase | async">
                 <notification-item [item]="itemFirebase"></notification-item>
     </li>

How can I reverse the order so that the user will see the last item that was pushed as the first item in the ngFor?

I read about Querying List(https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md) but I couldn't find what I was looking for.

Thanks!

[kazkis]

Hi @justme1,
I don't know if it's the best way to do it, but currently I'm creating a new field like this

const date = Date.now();
...
date: date,
reverseDate: 0 - date,
...

and then ordering by "date" for ascending order, by "reverseDate" for descending order.

[justme1]

@kazkis, great thanks I've implemented this and it works.

Seems a bit hacky - if there is a better way to do it it will be cool - otherwise this issue can be closed.

Thanks!

[davideast]

@justme1 Make sure to use the firebase.database.ServerValue.TIMESTAMP instead of Date.now()

[justme1]

@davideast why use firebase.database.ServerValue.TIMESTAMP instead of Date().getTime() ?

[kazkis]

@justme1 The Firebase TIMESTAMP is based on the server time while Date.getTime() on the client one. Using the server timestamp you can avoid lots of problems with user different locales or incorrectly set clocks.
For example if I use my client time to send you a message and my clock says it's 10:02 instead of 10:00, when you'll receive it the time shown would appear to be 2 minutes in the future for you.

[justme1]

@kazkis Agreed 100%.

Thanks.

[captaincole]

Hey guys, I just implemented a solution also to this, using the mapping function.

this.itemsFirebase = this.af.database.list('/users/userA').map( (arr) => { return arr.reverse(); } );

this will return an Observable in reverse order.

[justme1]

@thielCole, very nice solution, makes sense.

Fortunately I l've stopped using angularfire2 due to issue

https://github.com/angular/angularfire2/issues/295

[zompad]

@kazkis, I got your negative solution working using Date.now() but when using firebase.database.ServerValue.TIMESTAMP (as suggested by davideast) I was not able to set this to a negative value as I presume this is because it is resolved server side.

Instead I used thielCole map reverse solution and it is now working.

Thanks everyone!

[ericel]

In my case I had a field in the datebase called createdAt (createdAt: firebase.database.ServerValue.TIMESTAMP)
To retrieve I simply ask my list to query order by child

this.postList = this.af.database.list('post',  {
      query: {
        orderByChild: 'createdAt'
      }
    });

getPost() {
     return this.postList.map(posts => {
         return posts.reverse();
     });

[ghost]

order by timestamp not working ,
I have a field "lastUpdated" in "chatroom => $chatroomId => lastUpdated"

i am using "firebase.database.ServerValue.TIMESTAMP" in my lastUpdated , But when i use this query

this.af.database.list("/chatRooms", {
query:{
orderByChild : "lastUpdated"
}
}).subscribe((chatRooms) => {
console.log(chatRooms);
});

The result doesn't comes according to timestamp , neither asc nor desc.

[katowulf]

Please submit your own issue and cite a link to this one if you think they are similar. We won't respond to issues tacked on to the end of closed discussions.

[profesori]

Hi,
I want to order firebase data by date and i'm using firebase.database.ServerValue.TIMESTAMP when i store data to firebase :

const exp = new Experiment(); var dateTime = firebase.database.ServerValue.TIMESTAMP exp.creation = dateTime; exp.reverseCreation = 0-dateTime; exp.name = name;
So i'm setting a negative exp.reverseCreation value of data to have a descend order.The problem is i can't store a negative firebase.database.ServerValue.TIMESTAMP cause incompatible types. Is there a solution for that ?

Thanks

[bresleveloper]

@thielCole i was missing as FirebaseListObservable this.itemsFirebase = this.af.database.list('/users/userA').map( (arr) => { return arr.reverse(); } ) as FirebaseListObservable<any[]>;