Firebase 3.0 sort by value - sorting

Question

I am using firebase 3.0, I see examples for the firebase 2.x versions, however they seem to not work in 3.0. I have a simple structure that I want to have returned to me sorted by value.
{
"Regions" : {
"All" : 0,
"Eastern & Southern Africa" : 1,
"Global" : 6,
"Himalayas" : 2,
"Mekong" : 3,
"Mesoamerica" : 5,
"West Africa" : 4
}
}
The code I am using returns the json, however it is not sorted by value, it is sorted alphabetically.
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "servir-activity-database.firebaseapp.com",
databaseURL: "https://servir-activity-database.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
var theRegions;
firebase.database().ref('Regions/').orderByChild('value').on('value', function (regions) {
theRegions = regions.val();
loadRegions(theRegions);
});
function loadRegions(which)
{
$.each(which, function (i, value) {
$('#ddlRegions').append($('<option>').text(i).attr('value', value));
});
}
I realize that I can do the sort on the client side, however this seems like a simple thing that can be returned sorted and I am probably missing something really simple.

Answer 1

This is a really long winded answer and is way more than is needed to answer the question, but should probably be considered:
One of the life lessons Firebase teaches us is that disassociating key names from the data is usually a good idea. I have (several times) coded myself into a corner because I used what I thought was a static key name, only to find it needed to be changed later. So let me expound on that briefly:
For example, say you have a users node
Frank_Jones: Madagascar
Leroy_Jenkins: UBRS
and suppose Frank decides that he no longer wants to be using the name 'Frank', but instead wants to be called 'Puf'
In that case every single node in your entire database would then have to be updated to refer back to the newly called Puf_Jones node. Ugh.
To avoid this issue, let Firebase generate your node names with childByAutoId, and let your values be children. This is a 'randomly' created node name that is guaranteed to be discreet.
A better Firebase Structure for your data would be
Regions
-Ykjoas99joksjk
region_name: "Himalayas"
rank: 2
-Jlioksjnfjp987
region_name: "Eastern & Southern Africa"
rank: 1
-J989j99ajskmds
region_name: "West Africa"
rank: 4
The -Ykjoas99joksjk etc node names are created by Firebase.
As you can see we now have a name and rank for each region. Let's say you wanted to add average summer temperature:
-Ykjoas99joksjk
region_name: "Himalayas"
rank: 2
temp: 77F
This allows your Firebase structure to be elastic depending on your needs.
(some Swift code to follow but you'll get the idea)
To get the region names in order
let ref = myRootRef.childByAppendingPath("Regions")
ref.queryOrderedByChild("region_name").observeEventType(
.ChildAdded, withBlock : { snapshot in
print(snapshot)
})
To get the two highest ranks
ref.queryOrderedByChild("rank").queryLimitedToLast(2).observeEventType(
.ChildAdded, withBlock : { snapshot in
print(snapshot)
})
and the Swift answer to your question with your existing Firebase Structure:
regionsRef.queryOrderedByValue().observeEventType(.ChildAdded, withBlock: {
snapshot in
print(snapshot)
})
Here's my lol translation that needs to be fixed...
firebase.database().ref('Regions').orderByValue.on('value', function (snapshot) {
loadRegions(snapshot.val());
});

Answer 2

Thank you #Jay, your answer was just long winded enough! I had to change the code part from swift to javascript but i followed the autoid for the key method as you described. Here is the js i used to process the return data.
firebase.database().ref('Regions').orderByChild("rank").on('child_added', function (regions) {
loadRegions(regions.exportVal());
});
firebase.database().ref('Regions').orderByChild("rank").on('child_removed', function (regions) {
removeRegion(regions.exportVal());
});
function removeRegion(which)
{
$("#ddlRegions option[value="+which.rank+"]").remove();
}
function loadRegions(which)
{
var count = 0;
var RegionValue;
$.each(which, function (i, value) {
if (count % 2 == 0) {
RegionValue = value;
}
else {
$('#ddlRegions').append($('<option>').text(value).attr('value', RegionValue));
}
count++;
});
}