Sort array of objects with date field by date

Question

Give the following array of objects, I need to sort them by the date field ascending.

var myArray = [
  {
    name: "Joe Blow",
    date: "Mon Oct 31 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "Sam Snead",
    date: "Sun Oct 30 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "John Smith",
    date: "Sat Oct 29 2016 00:00:00 GMT-0700 (PDT)"  
  }
];

so that in this example, the final result would be John Smith, Sam Snead, and Joe Blow.

I am trying to use lodash's _.sortBy(), but I can't get any sorting to take place no matter how I try to use it:

_.sortBy(myArray, function(dateObj) {
  return dateObj.date;
});

or

_.sortBy(myArray, 'date');

What do I need to change to get my array sorted properly? I also have Moment.js, so I can use it to format the date string if needed. I tried converting the date property using .unix(), but that didn't make a difference.

Thanks.

Answer 1

You don't really need lodash. You can use JavaScript's Array.prototype.sort method.

You'll need to create Date objects from your date strings before you can compare them.

var myArray = [{
  name: "Joe Blow",
  date: "Mon Oct 31 2016 00:00:00 GMT-0700 (PDT)"
}, {
  name: "Sam Snead",
  date: "Sun Oct 30 2016 00:00:00 GMT-0700 (PDT)"
}, {
  name: "John Smith",
  date: "Sat Oct 29 2016 00:00:00 GMT-0700 (PDT)"
}];

myArray.sort(function compare(a, b) {
  var dateA = new Date(a.date);
  var dateB = new Date(b.date);
  return dateA - dateB;
});

console.log(myArray);

Answer 2

Your date values are strings, so you need to use the new Date() constructor to change them to javascript date objects. This way you can sort them (using _.sortBy).

var myArray = [
  {
    name: "Joe Blow",
    date: "Mon Oct 31 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "Sam Snead",
    date: "Sun Oct 30 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "John Smith",
    date: "Sat Oct 29 2016 00:00:00 GMT-0700 (PDT)"  
  }
];

myArray = _.sortBy(myArray, function(dateObj) {
  return new Date(dateObj.date);
});

console.log(myArray)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>

Answer 3

Here's a solution using standard Javascript by converting both values to date object and comparing their value.

myArray.sort((d1, d2) => new Date(d1.date).getTime() - new Date(d2.date).getTime());

A complete snippet:

var myArray = [
  {
    name: "Joe Blow",
    date: "Mon Oct 31 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "Sam Snead",
    date: "Sun Oct 30 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "John Smith",
    date: "Sat Oct 29 2016 00:00:00 GMT-0700 (PDT)"  
  }
];

myArray.sort((d1, d2) => new Date(d1.date).getTime() - new Date(d2.date).getTime());

console.log(myArray);

Answer 4

If you are trying to use lodash to sort dates in ascending or descending order for your array of objects, you should use _.orderBy instead of _.sortBy

https://lodash.com/docs/4.17.15#orderBy, this method allows specifying sort orders either by 'asc' or 'desc'

An example would be:

const sortedArray = _(myArray.orderBy([
      function(object) {
        return new Date(object.date);
      }],["desc"])

Answer 5

just write _.sortBy({yourCollection}, {the field name});

lodash will automatically figure that this is a date and it'll work like a magic!

Awesome!

Answer 6

A cleaner way using Lodash orderBy:

import _ from 'lodash'

const sortedArray = _.orderBy(myArray, [(obj) => new Date(obj.date)], ['asc'])

Answer 7

Inspired by others answers and noticing that you used moment.js and lodash, you can combine both with _.orderBy lodash method:

import moment from 'moment'
import * as _ from 'lodash'

let myArray = [
  {
    name: "Joe Blow",
    date: "Mon Oct 31 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "Sam Snead",
    date: "Sun Oct 30 2016 00:00:00 GMT-0700 (PDT)"
  },
  {
    name: "John Smith",
    date: "Sat Oct 29 2016 00:00:00 GMT-0700 (PDT)"  
  }
];


myArray = _.orderBy(myArray, [(item) => {
            return moment(item.date).format('YYYY-MM-DD')
         }], ['desc'])

Answer 8

this has worked for me

myArray = _.orderBy(myArray, [item => item.lastModified], ['desc']);