如何基于每个数组内的某个项目对可观察数组进行排序

Question

I have an Observable array in knockout with arrays inside, there is an item inside each of the arrays called 'time'. How would I order the arrays inside my observable array so that they are in order, from low to high, based on the value of the item. The values are in Hour:Minute:Second format.

 function viewModel() { var self = this; self.myObservable = ko.observableArray([ {time: "01:00:00", name: 'frank'}, {time: "05:30:00", name: 'bob'}, {time: "03:00:00", name: 'bill'}, {time: "00:00:21", name: 'john'}, {time: "00:12:00", name: 'paul'} ]) } 

Answer 1

You should use the sort() function.

    self.myObservable.sort(function (left, right) {
        return left.age === right.age ? 0
             : left.age < right.age ? -1
             : 1;
    });

Answer 2

Knockout has built-in methods for observableArray which work similar to Array.prototype . You can sort it by using localeCompare

 function viewModel() { var self = this; self.myObservable = ko.observableArray([ { time: "01:00:00", name: 'frank' }, { time: "05:30:00", name: 'bob' }, { time: "03:00:00", name: 'bill' }, { time: "00:00:21", name: 'john' }, { time: "00:12:00", name: 'paul' } ]); self.sort = function() { self.myObservable.sort((a, b) => a.time.localeCompare(b.time)) } } ko.applyBindings(new viewModel) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <!-- ko foreach: myObservable --> <span data-bind="text: time"></span><br> <!-- /ko --> <button data-bind="click: sort">Sort</button>