Custom Sorting By 24-hour clock Time in Backbone/Javascript

Question

I have backbone collection which consists of dates and 24-hour clock times. I would like to be able to sort my collection by time.

So since a normal sort functionality would sort (as an example) 1:00, 17:00, and 19:00 as such, I am trying to display 17:00, 19:00, 1:00 in that order. 1:00 of the next day proceeds 19:00 in time, in this case.

Since this case only occurs when a value is less than or equal to 12, the simplest solution seems to be: sort those values greater than 12; sort values less than 12; append sorted values less than 12 to values greater than 12. So two separate sorted lists.

    comparator: function( a, b ) {
                if(!this.sortColumn ) return 0;
                    if(sortColumn == 'time') {
    switch (a.get('time')) {
                case a > 12: return 1;
                case a <= 12: return 2;
            }
      }
}

This is a rough idea that I've had. This doesn't sort the two respective groups. The idea being that the case where it's greater than 12 precedes the case where it's less than 12, but they will be unsorted.

EDIT: Note that all the events occur after 12:00 PM on Day 1 and before 12:00 PM of the next day, Day 2. This is why dates like 1:00 will be after dates like 19:00.

Any advice would be fantastic.

Thanks

Answer 1

You can define your comparator function as a "sortBy" :

"sortBy" comparator functions take a model and return a numeric or string value by which the model should be ordered relative to others.

The goal is then to produce a sorting value that corresponds to your requirements. As @Pointy noted in the comments, adding 24 to the times before 12:00 would do the trick

For example

var C = Backbone.Collection.extend({

    comparator: function (m) {
        var t = m.get('time'),
            h = parseInt(t.substr(0, 2), 10),
            m = parseInt(t.substr(3), 10);
        if (h<12) h = h+24;

        return h *60 + m;
    }

});

var c = new C([
    {time: '01:17'},
    {time: '01:00'},
    {time: '12:00'},
    {time: '07:00'},
    {time: '15:00'}
]);

console.log(c.pluck('time'));

http://jsfiddle.net/nikoshr/5srqn5b4/

Answer 2

I dont see the issue with just ordering them by the actual number..

var times = [];
// generate some data..
// [1:00, 1:30, 2:00 ...]
for(var i=0; i < 24; i++){times.push(i.toString() + ':00');
times.push(i.toString() + ':30')}
// standard sorting
console.log(_.sortBy(times, function(num){ return num}))
> ["0:00", "0:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "1:00", "1:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30", "7:00", "7:30", "8:00", "8:30", "9:00", "9:30"]
// improved sorting
console.log(_.sortBy(times, function(num){ var key = parseInt(num.split(':')[0]); if (key >= 12) {return key - 12} return key + 20 }))
> ["12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30", "0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30", "7:00", "7:30", "8:00", "8:30", "9:00", "9:30", "10:00", "10:30", "11:00", "11:30"]