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("");
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

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./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

• javascript
• html
• arrays
• firebase

• hey, how are you saving the data in database? Like what is -JscIDsctxSa2QmMK4Mv, -Jswff0o9bWJeDmUoSA9 and -JscIs_oMCJ9aT6-JWDg? – Hammad Nasir Commented Dec 14, 2016 at 5:42

1 Answer 1

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 pared 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")...