[SalesForce] Lightning client side sorting (using a separate function, not inline)

I'm trying to implement a sorting function for the records returned by a callback. The normal javascript a.value - b.value inline implementation is working. This is the working code that I have:

/aura/myComponent/myComponentHelper

$A.getCallback(function(result) {
  var cases = result.values.cases;
  cases.sort(function (a, b) {
    return b.CaseNumber - a.CaseNumber
  })
})

I wanted to make a separate function out of this inline function, so I did a function like this:

/aura/myComponent/myComponentHelper

getCases : function (component) {

  var self = this;

  ... other codes...

  myPromise.then (
    $A.getCallback(function(result) {
      var cases = result.values.cases;
      cases.sort(self.sortByCaseNumber());
      ... other codes ...
    })
  )
  .catch (
    ... other codes ...
  )
},

sortByCaseNumber : function(a, b) {
  return b.CaseNumber - a.CaseNumber
}

However, I'm encountering an Error in $A.getCallback() [Cannot read property 'CaseNumber' of undefined].

Inside the sortByCaseNumber function, the values of a and b are both undefined. Not sure why this is happening. I'm checking the values of the cases list right before I sort it and the list definitely contains an array of case objects, and the CaseNumber field is there.

Best Answer

You're not supposed to call the function, but pass it in as a parameter to sort:

  cases.sort(self.sortByCaseNumber);

Note the lack of parentheses, because we're not actually calling the function, but instead passing it in as a parameter, much like you would a string or number (functions are formally of type Function, so you can use them like normal parameters). This is a pretty common idiom in JavaScript (setTimeout, setInterval, sort, map, reduce, Promise, etc) and also useful in Lightning (e.g. $A.getCallback), so you'll want to remember this.

Edit

Here's an updated link for the code provided below.

In Lightning, there's no need to import a library or call out to the server, you can just write your own. Note: I've not tested this, so you may need to tweak it to suit your needs.

({
    sortByName: function(component, event, helper) {
        var currentOrder = component.get("v.sortAsc"),
            currentList = component.get("v.records");
        currentOrder = !currentOrder;
        currentList.sort(function(a,b) {
            var t1 = a.Name == b.Name, t2 = a.Name < b.Name;
            return t1? 0: (currentOrder?-1:1)*(t2?1:-1);
        });
        component.set("v.sortAsc", currentOrder);
        component.set("v.records", currentList);
    }
})

Your actual click handler needs a minor adjustment as well:

onclick="{!c.sortByName}"

This code assumes two variables, namely sortAsc, a Boolean, and records, a list of Opportunity records.

To make it more palatable for multiple fields to sort by, you'll want to put this logic into a helper function, then you can replace all the .Name references with a dynamic attribute, like a[field] < b[field].

I actually wrote a demo for this. It's not "pretty", but it demonstrates the functionality:

OpportunityHelper.cls

public class OpportunityHelper {
    @AuraEnabled public static Opportunity[] loadOpportunityRecords() {
        return [SELECT Name, Amount FROM Opportunity WHERE Amount <> NULL LIMIT 10];
    }
}

opportunity.app

<aura:application controller="OpportunityHelper">
    <aura:attribute type="Opportunity[]" name="records" />
    <aura:attribute type="Boolean" name="sortAsc" />
    <aura:attribute type="String" name="sortField" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <table>
        <thead>
            <td onclick="{!c.sortByName}">Name</td>
            <td onclick="{!c.sortByAmount}">Amount</td>
        </thead>
        <tbody>
            <aura:iteration items="{!v.records}" var="record">
                <tr>
                    <td>{!record.Name}</td>
                    <td>{!record.Amount}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

opportunityController.js

({
    doInit: function(component, event, helper) {
        var load = component.get("c.loadOpportunityRecords");
        load.setCallback(this, function(result) {
            component.set("v.records", result.getReturnValue());
            component.set("v.sortAsc", true);
            helper.sortBy(component, "Name");
        });
        $A.enqueueAction(load);
    },
    sortByName: function(component, event, helper) {
        helper.sortBy(component, "Name");
    },
    sortByAmount: function(component, event, helper) {
        helper.sortBy(component, "Amount");
    }
})

opportunityHelper.js

({
    sortBy: function(component, field) {
        var sortAsc = component.get("v.sortAsc"),
            sortField = component.get("v.sortField"),
            records = component.get("v.records");
        sortAsc = field == sortField? !sortAsc: true;
        records.sort(function(a,b){
            var t1 = a[field] == b[field],
                t2 = a[field] > b[field];
            return t1? 0: (sortAsc?-1:1)*(t2?-1:1);
        });
        component.set("v.sortAsc", sortAsc);
        component.set("v.sortField", field);
        component.set("v.records", records);
    }
})

[SalesForce] Sorting of DataTable on Client side in Lightning

I think this would be best approach to do so in javascript which is totally client side and it wont take much time as I am already using it on large data set it is not taking time. Again if you think it s taking time then please use lightning:spinner as well. I f you notice on standard list view on objects they are totally on server side.