Display posts in descending posted order

Question

I'm trying to test out Firebase to allow users to post comments using push. I want to display the data I retrieve with the following;

fbl.child('sell').limit(20).on("value", function(fbdata) { 
  // handle data display here
}

The problem is the data is returned in order of oldest to newest - I want it in reversed order. Can Firebase do this?

Answer 1

I did this by prepend.

query.orderByChild('sell').limitToLast(4).on("value", function(snapshot){
    snapshot.forEach(function (childSnapshot) {
        // PREPEND
    });
});

Answer 2

Since this answer was written, Firebase has added a feature that allows ordering by any child or by value. So there are now four ways to order data: by key, by value, by priority, or by the value of any named child. See this blog post that introduces the new ordering capabilities.

The basic approaches remain the same though:

1. Add a child property with the inverted timestamp and then order on that.

2. Read the children in ascending order and then invert them on the client.

Firebase supports retrieving child nodes of a collection in two ways:

• by name
• by priority

What you're getting now is by name, which happens to be chronological. That's no coincidence btw: when you push an item into a collection, the name is generated to ensure the children are ordered in this way. To quote the Firebase documentation for push:

The unique name generated by push() is prefixed with a client-generated timestamp so that the resulting list will be chronologically-sorted.

The Firebase guide on ordered data has this to say on the topic:

How Data is Ordered

By default, children at a Firebase node are sorted lexicographically by name. Using push() can generate child names that naturally sort chronologically, but many applications require their data to be sorted in other ways. Firebase lets developers specify the ordering of items in a list by specifying a custom priority for each item.

The simplest way to get the behavior you want is to also specify an always-decreasing priority when you add the item:

var ref = new Firebase('https://your.firebaseio.com/sell');
var item = ref.push();
item.setWithPriority(yourObject, 0 - Date.now());

Update

You'll also have to retrieve the children differently:

fbl.child('sell').startAt().limit(20).on('child_added', function(fbdata) {
  console.log(fbdata.exportVal());
})

In my test using on('child_added' ensures that the last few children added are returned in reverse chronological order. Using on('value' on the other hand, returns them in the order of their name.

Be sure to read the section "Reading ordered data", which explains the usage of the child_* events to retrieve (ordered) children.

A bin to demonstrate this: http://jsbin.com/nonawe/3/watch?js,console

Answer 3

There is really no way but seems we have the recyclerview we can have this

 query=mCommentsReference.orderByChild("date_added");
        query.keepSynced(true);

        // Initialize Views
        mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        mManager = new LinearLayoutManager(getContext());
//        mManager.setReverseLayout(false);
        mManager.setReverseLayout(true);
        mManager.setStackFromEnd(true);

        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(mManager);

Answer 4

myarray.reverse(); or this.myitems = items.map(item => item).reverse();

Answer 5

You can add a column named orderColumn where you save time as

Long refrenceTime = "large future time"; Long currentTime = "currentTime"; Long order = refrenceTime - currentTime;

now save Long order in column named orderColumn and when you retrieve data as orderBy(orderColumn) you will get what you need.

Answer 6

In Android there is a way to actually reverse the data in an Arraylist of objects through the Adapter. In my case I could not use the LayoutManager to reverse the results in descending order since I was using a horizontal Recyclerview to display the data. Setting the following parameters to the recyclerview messed up my UI experience:

llManager.setReverseLayout(true);
llManager.setStackFromEnd(true);

The only working way I found around this was through the BindViewHolder method of the RecyclerView adapter:

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
    final SuperPost superPost = superList.get(getItemCount() - position - 1);
}

Hope this answer will help all the devs out there who are struggling with this issue in Firebase.