How to sort value inside a Firebase child to the rest?

11,465

Firebase doesn't have a date type, since JSON doesn't have it. So it has no idea that there're stored dates in those strings. For sorting purposes you have to store a primitive type that represents these dates and gives required order of sorting when compared as a string or number.

For example: a timestamp. Given date is a JS date object, add sortDate: date.getTime() to each object when saving.

{
  "events": {
    "-JscIDsctxSa2QmMK4Mv": {
        "date": "Friday, June 19, 2015",
        "sortDate": 1434697200000,
        "title": "Event Two"
    },
    "-Jswff0o9bWJeDmUoSA9": {
        "date": "Friday, June 12, 2015",
        "sortDate": 1434092400000,
        "title": "Event One"
    },
    "-JscIs_oMCJ9aT6-JWDg": {
        "date": "Monday, August 10, 2015",
        "sortDate": 1439190000000,
        "title": "Event Three"
    }
  }
}

And then:

ref.orderByChild("sortDate")...
Share:
11,465
Ricek
Author by

Ricek

My name is Liang Gao. I'm a student from New York City, ever since I can remember I have loved technology. Please feel free to check-out my projects on GitHub. More information can be found through LinkedIn or send me an email.

Updated on June 29, 2022

Comments

  • Ricek
    Ricek almost 2 years

    In my firebase I have several events, each with title and date string:

    {
        "events": {
            "-JscIDsctxSa2QmMK4Mv": {
                "date": "Friday, June 19, 2015",
                "title": "Event Two"
            },
            "-Jswff0o9bWJeDmUoSA9": {
                "date": "Friday, June 12, 2015",
                "title": "Event One"
            },
            "-JscIs_oMCJ9aT6-JWDg": {
                "date": "Monday, August 10, 2015",
                "title": "Event Three"
            }
        }
    }
    

    In my javascript code, I retrieve the events child and push each title and date to an array then append it to my html page and display the content.

    var ref = new Firebase("https://demo.firebaseio.com/events");
    var build = new Array("");
    ref.orderByChild("date").once("value", function(snapshot) {
      snapshot.forEach(function(data) {
        var tmp = data.val();
        eventMonth = tmp.date.split(" ")[1];
        build.push('<h3>'+tmp.title+'</h3><p>Date: '+tmp.date+'</p>');
      });
      $("#event-content").append(build.join(''));
    

    orderByChild doesn't seem to be working, how can I order the events by date so it can look something like below:

    Event One: Friday, June 12, 2015

    Event Two: Friday, June 19, 2015

    Event Three: Monday, August 10, 2015