how to implement descending orderByChild()

[Raj Virk]

Hi,

i have data where one child keeps value of most likes, i want to order or show data in descending order as below. please help me to implement this.

var ref = new Firebase(<LINK>);

// i have around 200 items to show in a way that most likes comes on top all the time

ref.orderByChild('likes').on("child_added", function(snapshot) {

  var data = snapshot.val();

 html.push('<div>'+data.likes+'</div>');

document.getElementById('data').innerHTML = html.join('');

}

Please help with above scenario.

Thanks,

[Michael Lehenbauer]

Hi Raj,

The basic approach here is to write your code to just render the items in reverse order.  For an example of that you can take a look at our leaderboard example.  It shows high scores from high to low.

Let me know if you run into issues.

Thanks,

-Michael

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/d4365871-2808-4698-8be6-191bab2ad4f3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Raj Virk]

Hello Michael,

Thanks for replying back, but can you please give me example of code i provided up there to show most likes on top and than lowest at bottom. 

Thanks in advance.

Raj

[Frank van Puffelen]

Hey Raj,

The leaderboard example that Michael linked to does precisely that: it shows the player with the highest score at the top and the lowest score at the bottom. See https://www.firebase.com/tutorial/#session/itocmka2ohj

It uses priorities to determine the order, but you can nowadays accomplish the same with any property. The trick to get descending order is to invert the number of likes, so:

item.order = -1 * item.likes. 

Then you can run a query that gets the number of item you want to show:

ref.orderByChild("order").limitToFirst(10).on("child_added", function(snapshot, previousChildKey) {

}); 

On the initial load, the children will arrive in the correct order. So it is tempting to simply append them to your data. But after the initial data has loaded, the query will still be monitoring for changes. Once an item gets a higher number of likes than are currently in the data, you will get a child_removed event for the least-liked item and a child_added for the new favorite item.

The leaderboard sample handles this in the best way: when Firebase calls you child_added callback, it passes a previousChildKey. You can use this to look up the previous child's element in the HTML and insert the new favorite item in its correct place.

[Raj Virk]

Hello,

Thanks for replying, But i get the similar results with css hack. which is very easy to implement. I am getting my results in how i really want, hope this can help others too or you can put this hack on firebase knowledge base if you think this works accordingly without any issue..

for eg: you are rendering all innerhtml results in a div called container

---html----

<div id = "container">

   <!-- firebase results here -->

</div>

-- css---

#container{

  display: -webkit-flex;

        display: -moz-flex;

        display: -ms-flex;

        display: -o-flex;  

        -webkit-flex-direction: column-reverse;

        -moz-flex-direction: column-reverse;

        -ms-flex-direction: column-reverse;

        -o-flex-direction: column-reverse;

}

--js---

fb.orderByChild('likes').on('child_added', function(sp){

  data = sp.val();

  html.push('<div>'+data.likes+'</div>');

  document.getElementById('container').innerhtml = html.join('');

});