How Can I Sort Observable Array Using Select Box and Knockout and Rebind to List

Question

I have a select drop down box and a list of data. The drop down box contains the names of the columns for the list of data. That list of data is bound to an observable array called allCertificates. When a user selects a column name from the drop down box the change event is fired. I want to sort the list of data based on the selection from the drop down list. I plan on sorting the allCertificates observable array in the SortBy function and rebind it to the list of data, but I do not know how to implement this. What should the code be for the SortBy function?

Here is the select list in my view code (CAApproval.html)-

    <select id="ddlSortBy" style="margin-top: 0px; height: 24px; width: 140px !important"
        data-bind="change: SortBy(), options: serverOptions, optionsText: 'name', optionsValue: 'id', value: 'OptionText'">
    </select>

Here is the list of data that is bound to the allCertificates observable array-

                        <ol data-bind="foreach: allCertificates">
                        <table id="Table2" border="0" class="table table-hover" width="100%">
                            <tr style="cursor: hand">
                                <td>
                                    <ul style="width: 100%">
                                        <b><span data-bind="    text: clientName"></span>&nbsp;(<span data-bind="    text: clientNumber"></span>)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span data-bind="    text: borrowBaseCount"></span>&nbsp;Loan(s)&nbsp;</b>
                                        <br />
                                        Collateral Analyst:&nbsp;<span data-bind="    text: userName"></span>
                                        <br />
                                        Certificate:&nbsp;<span data-bind="text: lwCertID"></span>&nbsp;&nbsp;Request&nbsp;Date:&nbsp;<span data-bind="    text: moment(requestDate).format('DD/MMM/YYYY')"></span>
                                </td>
                            </tr>
                        </table>

Here is my viewmodel code with the empty SortBy function (SortBy is where I want to sort the observable array and re-bind it to the list of data)-

define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
    var allCertificates = ko.observableArray();
    var myCertificates = ko.observableArray();

    var serverOptions = [
    { id: 1, name: 'Certificate', OptionText: 'lwCertID' },
    { id: 2, name: 'Client Name', OptionText: 'clientName' },
    { id: 3, name: 'Client Number', OptionText: 'clientNumber' },
    { id: 4, name: 'Request Date', OptionText: 'requestDate' },
    { id: 4, name: 'Collateral Analyst', OptionText: 'userName' }
    ];

    var activate = function () {

        // go get local data, if we have it
        return SelectAllCerts();

    };


    var vm = {
        activate: activate,
        allCertificates: allCertificates,
        myCertificates: myCertificates,
        title: 'Certificate Approvals',
        SelectMyCerts: SelectMyCerts,
        SelectAllCerts: SelectAllCerts,
        DefaultMyCert: DefaultMyCert,
        theOptionId: ko.observable(1),
        serverOptions: serverOptions,
        SortBy: SortBy
    };


    return vm;


    function SortUpDownAllCerts() {
        return allCertificates.sort()
    }

    function SortUpDownMyCerts() {
        return allCertificates.sort()
    }

    //*****WHAT CODE GOES HERE?
    function SortBy() {
        if (serverOptions[$('#ddlSortBy').val()] != undefined) {

        }
    }

    function DefaultMyCert() {
        return $('#btnMyCert').toggle('show');
    }

    function SelectAllCerts() {
        return CertificateDataService.getallCertificates(allCertificates);
    }

    function SelectMyCerts() {
        return CertificateDataService.getallCertificates(myCertificates);
    }
});

What should the SortBy function code be?

EDIT:

Progress (Thanks Damien!), but need a little more info. I have it subscribing on serverSelectedOptionID, and I can see data in function(a, b) along with the correct value in sortCriteriaID. What I am missing is how to use sortCriteriaID to specifiy which column to sort on. Here is the new code-

       serverSelectedOptionID.subscribe(function () {
        var sortCriteriaID = serverSelectedOptionID._latestValue;
        allCertificates.sort(function (a, b) {
            if (a[sortCriteriaID] == b[sortCriteriaID]) {
                return a[sortCriteriaID] > b[sortCriteriaID] ? 1 : a[sortCriteriaID] < b[sortCriteriaID] ? -1 : 0;
            }

            return a[sortCriteriaID] > b[sortCriteriaID] ? 1 : -1;

        });
    });

Here is the model for the allCertificates array-

     function (logger, system) {
    var certificateModel = function (clientID, lwCertID, requestDate, userName, statusDescription, statusCode, statusDesc, ceoUserName, clientName, clientNumber, borrowBaseCount, advRequestCount) {
        var self = this;
        self.clientID = ko.observable(clientID);
        self.lwCertID = ko.observable(lwCertID);
        self.requestDate = ko.observable(requestDate);
        self.userName = ko.observable(userName);
        self.statusDescription = ko.observable(statusDescription);
        self.statusCode = ko.observable(statusCode);
        self.statusDesc = ko.observable(statusDesc);
        self.ceoUserName = ko.observable(ceoUserName);
        self.clientName = ko.observable(clientName);
        self.clientNumber = ko.observable(clientNumber);
        self.borrowBaseCount = ko.observable(borrowBaseCount);
        self.advRequestCount = ko.observable(advRequestCount);
    };

Of course a[sortCriteriaID] does not work. One of the columns is lwCertID. What would the code be to use sortCriteriaID to represent a.lwCertID if lwCertID was option 1 (sortCriteriaID = 1)?

CORRECTED CODE EDIT (THIS IS THE LAST PIECE AND IT WORKS)-

        serverSelectedOptionID.subscribe(function () {
        var sortCriteriaID = serverSelectedOptionID._latestValue;
        allCertificates.sort(function (a, b) {
            var fieldname = serverOptions[sortCriteriaID-1].OptionText;

            if (a[fieldname] == b[fieldname]) {
                return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;
            }

            return a[fieldname] > b[fieldname] ? 1 : -1;

        });
    });

Damien Damien · Accepted Answer · 2013-07-18T14:50:44

This is not the way you should code with knockout :

 serverOptions[$('#ddlSortBy').val()] != undefined);

You should create a ko.observable named serverSelectedOptionID in the viewModel. Then change the select binding into :

data-bind="value : serverSelectedOptionID , options: serverOptions, optionsText: 'name', optionsValue: 'id', value: 'OptionText'"

So now you can subscribe on the serverSelectedOptionID :

serverSelectedOptionID .subcribe(function(){
    var sortCriteriaID = this.serverSelectedOptionID();
    allCertificates.sort(function(a,b){
          // use sortCriteriaID to return -1,0 or 1
    });        
});

If you need explanation consider to create a fiddle.

I hope it helps.

How Can I Sort Observable Array Using Select Box and Knockout and Rebind to List

1 Answers