Sorting dates in AngularJS frontend

Question

I have a table rendered with a few records and their creation date. The $scope data looks like this:

$scope.data = [{
  "FeeId": "17",
  "FirmName": "LAWFIRM1",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-DEC-16"
},{
  "FeeId": "18",
  "FirmName": "LAWFIRM2",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Open",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "11-DEC-16"
}]

I need a AngularJS frontend based sorting on the by startDate. It's currently not working with a date in string format.

How can I sort my data by startDate in frontend using AngularJS?

Answer 1

Try this working demo :

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.jsonObj = [{
  "FeeId": "1",
  "FirmName": "ABC",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-DEC-16"
},
{
  "FeeId": "2",
  "FirmName": "XYZ",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-NOV-16"
}];

for(var i in $scope.jsonObj) {
  $scope.jsonObj[i].startDate = Date.parse($scope.jsonObj[i].startDate);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
      <div ng-repeat="item in jsonObj | orderBy:'startDate'">{{item.FirmName}}: {{item.startDate | date}}</div>
    </div>
</div>

Answer 2

Use a conversion object along with substr and parseInt to compare part of the date string however you please:

//Month conversion object
var months = {
  NOV: 11,
  DEC: 12
};
//Sort function
function sortByDate(a, b) {
    return (
      //Year
      parseInt(a.startDate.substr(7, 2)) - parseInt(b.startDate.substr(7, 2)) ||
      //Month
      months[a.startDate.substr(3, 3)] - months[b.startDate.substr(3, 3)] ||
      //Day
      parseInt(a.startDate.substr(0, 2)) - parseInt(b.startDate.substr(0, 2)));
  }
  //The list to sort
var list = [{
  "FeeId": "17",
  "FirmName": "LAWFIRM1",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-DEC-16"
}, {
  "FeeId": "17",
  "FirmName": "LAWFIRM1",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-NOV-16"
}, {
  "FeeId": "17",
  "FirmName": "LAWFIRM1",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-DEC-15"
}, {
  "FeeId": "17",
  "FirmName": "LAWFIRM1",
  "countryId": "IN",
  "filing": "REI-Reissue",
  "agentFeeCode": "AGNT",
  "feeType": "GOVT",
  "Term": "Fixed",
  "Amount": "150",
  "comments": "test comment",
  "startDate": "13-NOV-16"
}];
//Sorting the list
console.log(list
  .sort(sortByDate));

Answer 3

While your date format 13-DEC-16 is custom to the common ISO-Dates its hard to parse that date. In that way I changed your format from 13-DEC-16 to 13-12-16. I'll hope you are able to change your API data structure. Just a hint, it would be a nice improvement if you are using a ISO-Date format inside your API. So other system / languages would be able to handle that date too.

I would preffer a solution using moment.js which provides nice helpers by using dates in JavaScript. You need to parse the date to ensure correct date sorting in AngularJS. Until that you can use AngularJS filter orderBy to sort by date in your frontend:

filter:orderBy(array, expression[, reverse]);

Your view would look like this:

<div class="wrapper">
    <div ng-repeat="item in data|orderBy:'startDate'">
        {{ item }}
    </div>
</div>

Your controller would be look like this:

//init scope data
$scope.data = [
    {
        "FeeId": "17",
        "FirmName": "LAWFIRM1",
        "countryId": "IN",
        "filing": "REI-Reissue",
        "agentFeeCode": "AGNT",
        "feeType": "GOVT",
        "Term": "Fixed",
        "Amount": "150",
        "comments": "test comment",
        "startDate": "13-12-16"
    },{
        "FeeId": "18",
        "FirmName": "LAWFIRM12",
        "countryId": "IN",
        "filing": "REI-Reissue",
        "agentFeeCode": "AGNT",
        "feeType": "GOVT",
        "Term": "Fixed",
        "Amount": "150",
        "comments": "test comment",
        "startDate": "14-12-16"
    },{
        "FeeId": "19",
        "FirmName": "LAWFIRM12",
        "countryId": "IN",
        "filing": "REI-Reissue",
        "agentFeeCode": "AGNT",
        "feeType": "GOVT",
        "Term": "Fixed",
        "Amount": "150",
        "comments": "test comment",
        "startDate": "11-12-16"
    }
];

/**
 * Parse custom date format with moment js
 */
angular.forEach($scope.data, function (item, key) {
    $scope.data[key].startDate = new moment(item.startDate, "DD-MM-YY")._d;
});