Sorting an Observable Array in Knockout

Question

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 duplica

Answer 1

You have to use Two sort to do this .In first sorting , sort according to persons last name And In 2nd Sorting first Search according to last name if more than two persons have same last name than sort these according to their first name at their location , using some Standard sorting Algorithm ....

Answer 2

KnockoutJS observable arrays offer a sort function, this makes it relatively easy to sort a databound array in your UI (regardless of the natural order of the data.)

data-bind="foreach: items.sort(function (l, r) { return l.lastName() > r.lastName() ? 1 : -1 })"

You should not have to pre-sort/re-sort your source data, if you're sorting before binding (or rebinding due to a sort) then you're doing it wrong.

That said, what you're asking is to sort by two datum, last name, then first name.

Instead of "l.lastName() > r.lastName() ? 1 : -1" consider the following:

l.lastName() === r.lastName() 
    ? l.firstName() > r.firstName() ? 1 : -1
    : l.lastName() > r.lastName() ? 1 : -1

This could be more efficient, I'm sure. Basically you have three conditionals at play:

1. Are the last names Equal?
2. If so, compare first names and return a result.
3. Else, compare last names and return a result.

I've scanned your code and I see no such sort function in place.

This is similar to Michael Best's answer, however, I've attempted to clarify WHERE to handle sorting (in your binding, first example) and HOW to achieve the sort you're looking for (multiple datum.)

data-bind="foreach: items().sort(function (l, r) { return (l.lastName() == r.lastName()) ? (l.firstName() > r.firstName() ? 1 : -1) : (l.lastName() > r.lastName() ? 1 : -1) })"

Naturally, this can get unwieldy as you introduce more sort vectors, such as reversals or additional datum, and so you should implement a filter function that performs the above evaluation for you:

data-bind="foreach: items().sort(my.utils.compareItems)"

Answer 3

I had some issues trying to sort a observable array, I was not seeing any results in my code.

You need to sort the results you receive via ajax/getJSON request first, before you return the new items into your array.

This way the results are sorted before they are added into your observable array as new items. No need to sort them at the bindings then.

See the example below.

players(ko.utils.arrayMap(result, function (item) {
                    result.sort(function (l, r) {
                        return l.name == r.name ? 0 : (l.name < r.name ? -1 : 1);
                    });
                return new Player(item);
            }));

1. get data using AJAX / getJSON
2. Sort the result of that request into your array of choice

Answer 4

If you make sure your players.json returns the names sorted, you'll be fine. If it's loading them from a database, you need to add the first name field to your ORDER BY clause.

If you want to do the sorting in Javascript, you could do it right after you load it from the service:

players.sort(function(player1, player2) {
    return player1.lastname.localeCompare(player2.lastname) ||
        player1.firstname.localeCompare(player2.firstname);
});