I have an observable array in Knockout of person objects. I wanted to be able to sort the list of persons based on the last name. The problem is the list has a number of duplicate last names. The result is that when there are more than one last name, the first names appear as they were found. I'd like to be able to sort the array by last name and when there are more than one last name, have it also sort by first name. I'm using a text input for the user to start typing in the last name. The results are bound to a template that displays all the matches.
<input data-bind="value: filter, valueUpdate: 'afterkeydown'">
And here is my Knockout array filter code:
function Item(firstname, lastname) {
this.firstname = ko.observable(firstname);
this.lastname = ko.observable(lastname);
}
var playersViewModel = {
items: ko.observableArray([]),
filter: ko.observable("")
};
var players;
$(function() {
playersViewModel.filteredItems = ko.computed(function() {
var filter = this.filter().toLowerCase();
if (!filter) {
return this.items();
} else {
return ko.utils.arrayFilter(this.items(), function(item) {
return ko.utils.stringStartsWith(item.lastname().toLowerCase(), filter);
});
}
}, playersViewModel);
$.getJSON('./players.json', function(data) {
players = data.players;
playersViewModel.players = ko.observableArray(players);
ko.applyBindings(playersViewModel);
var mappedData = ko.utils.arrayMap(players, function(item) {
return new Item(item.firstname,item.lastname);
});
playersViewModel.items(mappedData);
});
});
For last name filtering this works fine, but I'm unable to find a way to add in sorting first name when there are duplicate last names. For example, in my array when sorted by last name I'm getting:
Joe Bailey
Jack Brown
Adam Brown
Bob Brown
Jim Byrd
I'd like the duplicate last names to have their first names sorted as well:
Joe Bailey
Adam Brown
Bob Brown
Jack Brown
Jim Byrd