Sort array of objects by single key with date value

Sort array of objects by single key with date value

I have an array of objects with several key value pairs, and I need to sort them based on ‘updated_at’:
[
{
“updated_at” : “2012-01-01T06:25:24Z”,
“foo” : “bar”
},
{
“updated_at” : “2012-01-09T11:25:13Z”,
“foo” : “bar”
},
{
“updated_at” : “2012-01-05T04:13:24Z”,
“foo” : “bar”
}
]

What’s the most efficient way to do so?

Solutions/Answers:

Solution 1:

You can use Array.sort.

Here’s an (untested) example:

arr.sort(function(a, b){
    var keyA = new Date(a.updated_at),
        keyB = new Date(b.updated_at);
    // Compare the 2 dates
    if(keyA < keyB) return -1;
    if(keyA > keyB) return 1;
    return 0;
});

Solution 2:

I already answered a really similar question here: Simple function to sort an array of objects

For that question I created this little function that might do what you want:

function sortByKey(array, key) {
    return array.sort(function(a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

Solution 3:

The Array.sort() method sorts the elements of an array in place and returns the array. Be careful with Array.sort() as it’s not Immutable. For immutable sort use immutable-sort.

Related:  With jQuery, how can I implement a “page loading” animation? [duplicate]

This method is to sort the array using your current updated_at in ISO format. We use new Data(iso_string).getTime() to convert ISO time to Unix timestamp. A Unix timestamp is a number that we can do simple math on. We subtract the first and second timestamp the result is; if the first timestamp is bigger than the second the return number will be positive. If the second number is bigger than the first the return value will be negative. If the two are the same the return will be zero. This alines perfectly with the required return values for the inline function.

For ES6:

arr.sort((a,b) => new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime());

For ES5:

arr.sort(function(a,b){ 
 return new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime();
});

If you change your updated_at to be unix timestamps you can do this:

For ES6:

arr.sort((a,b) => a.updated_at - b.updated_at);

For ES5:

arr.sort(function(a,b){ 
 return a.updated_at - b.updated_at;
});

At the time of this post, modern browsers do not support ES6. To use ES6 in modern browsers use babel to transpile the code to ES5. Expect browser support for ES6 in the near future.

Related:  Can I turn off antialiasing on an HTML element?

Array.sort() should receave a return value of one of 3 possible outcomes:

  • A positive number (first item > second item)
  • A negative number (first item < second item)
  • 0 if the two items are equal

Note that the return value on the inline function can be any
positive or negative number. Array.Sort() does not care what the
return number is. It only cares if the return value is positive,
negative or zero.

For Immutable sort: (example in ES6)

const sort = require('immutable-sort');
const array = [1, 5, 2, 4, 3];
const sortedArray = sort(array);

You can also write it this way:

import sort from 'immutable-sort';
const array = [1, 5, 2, 4, 3];
const sortedArray = sort(array);

The import-from you see is a new way to include javascript in ES6 and makes your code look very clean. My personal favorite.

Immutable sort doesn’t mutate the source array rather it returns a new array. Using const is recommended on immutable data.

Solution 4:

Here’s a slightly modified version of @David Brainer-Bankers answer that sorts alphabetically by string, or numerically by number, and ensures that words beginning with Capital letters don’t sort above words starting with a lower case letter (e.g “apple,Early” would be displayed in that order).

function sortByKey(array, key) {
    return array.sort(function(a, b) {
        var x = a[key];
        var y = b[key];

        if (typeof x == "string")
        {
            x = (""+x).toLowerCase(); 
        }
        if (typeof y == "string")
        {
            y = (""+y).toLowerCase();
        }

        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

Solution 5:

Use underscore js or lodash,

var arrObj = [
    {
        "updated_at" : "2012-01-01T06:25:24Z",
        "foo" : "bar"
    },
    {
        "updated_at" : "2012-01-09T11:25:13Z",
        "foo" : "bar"
    },
    {
        "updated_at" : "2012-01-05T04:13:24Z",
        "foo" : "bar"
    }
];

arrObj = _.sortBy(arrObj,"updated_at");

_.sortBy() returns a new array

Related:  What is the meaning of svg:svg?

refer http://underscorejs.org/#sortBy and
lodash docs https://lodash.com/docs#sortBy

Solution 6:

As This answer’s states, you can use Array.sort.

arr.sort(function(a,b){return new Date(a.updated_at) - new Date(b.updated_at)})

arr = [
    {
        "updated_at" : "2012-01-01T06:25:24Z",
        "foo" : "bar"
    },
    {
        "updated_at" : "2012-01-09T11:25:13Z",
        "foo" : "bar"
    },
    {
        "updated_at" : "2012-01-05T04:13:24Z",
        "foo" : "bar"
    }
];
arr.sort(function(a,b){return new Date(a.updated_at) - new Date(b.updated_at)});
console.log(arr);