Javascript Sort Array Of Objects

In this tutorial, You will see how to sort array of objects in javascript. You will learn to sort an array of objects based on the object property that has different data types like number, string, date.

    Table Of Contents

  1. Quick Solution
  2. javascript sort array of objects by property
    1. Using string property
    2. Using number property
    3. Using date property
  3. Sort array of objects by key descending
  4. Sort array of objects by multiple properties
  5. Conclusion
javascript sort array of objects

Quick Solution

For quick solution of you problem check out the below code snippet. You can copy and paste the code in your project and run it.

If you want to learn everything in detail then read the full tutorial.

Example

var array = [
  { name: 'John', age: 25, date: '2012-07-15' },
  { name: 'Peter', age: 30, date: '2008-10-02' },
  { name: 'Harry', age: 28, date: '2020-12-30' },
  { name: 'Clark', age: 35, date: '2022-01-04' },
  { name: 'Maya', age: 25, date: '2020-08-05' }
];

// sort object by string property
array.sort(function(a, b) {
  if(a.name < b.name) { return -1; }
  if(a.name > b.name) { return 1; }
  return 0;
});
console.log("Sort by string (name) property ----------------");
printArray(array);

// sort object by number property
array.sort(function(a, b) {
  return a.age - b.age;
});
console.log("\nSort by number (age) property ----------------");
printArray(array);

// sort object by date property
array.sort(function(a, b) {
  return new Date(a.date) - new Date(b.date);
});
console.log("\nSort by date property ----------------");
printArray(array);

// printing function
function printArray(array) {
  array.forEach(function(item) {
    console.log(item);
  });
}

Javascript Sort Array Of Objects By Property

Sorting an array of objects is one of the common tasks in Javascript when working with real-life data.

You can use the properties of objects to sort the array while sorting the values of those properties are compared which give them a position in the array.

To sort an array of objects we are going to use the built-in sort() method.

sort() method has some default setups to sort the things so to sort something according to our requirement we need to pass a compare function to the sort method. Learn the sort method in detail.

Syntax:

arr.sort(compareFunction);

// compare function
function compareFunction(a, b) {
  return a - b;
}

The compare function is used to compare two values and return a number. The returned number is used to determine the order of the two elements being compared.

If the returned number is less than 0 then the first value is pushed to the front of the array, if the returned number is greater than 0 then the second value is pushed to the front of the array, if the returned number is equal to 0 then the values are not sorted and are left in the same order.

Let's now use the sort() method to sort an array of objects on the basis of property value.

1. Javascript sort array of objects by string property

To sort an array of objects on the basis of a string property, use the string property name in the compare function.

This way elements will be compared according to that string property and your object will be sorted according to that.

The following example sorts the array of objects on the basis of the name of users.

Example

// array of objects
var customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725 },
  { name: 'Mary', birthday: '1985-3-14', credit: 515 },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325 },
  { name: 'Peter', birthday: '1992-1-10', credit: 875 },
  { name: 'Mike', birthday: '1997-5-14', credit: 825 }
];

// sort by name
customers.sort(function(a, b) {
  return a.name.localeCompare(b.name);
});
// output array
customers.forEach((customer) => {
  console.log(customer);
});

After running the code you will see the array of objects is sorted on the basis of name alphabetically. The order of the array is as follows: "Mary", "Mike", "Peter", "Sara", "Zoya".

2. Javascript sort array of objects by number

To sort using number property we are going to use customer credit property from the object.

Now use the credit property in the compare function to sort the array.

Example

const customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725 },
  { name: 'Mary', birthday: '1985-3-14', credit: 515 },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325 },
  { name: 'Peter', birthday: '1992-1-10', credit: 875 },
  { name: 'Mike', birthday: '1997-5-14', credit: 825 }
];

// sort by credit
customers.sort(function(a, b) {
  return a.credit - b.credit;
});
// output array
customers.forEach((customer) => {
  console.log(customer);
});

After running the code you can see that array is sorted in ascending order of the credit property. The order of the array is as follows: 325, 515, 725, 825, 875.

To sort the customers in descending order of their credit score just reverse the return sign of the compare function.

3. Javascript sort array of objects by date

To sort the array of objects on the basis of the date property first convert the date string into a date object using the new Date() method.

Then use this date object in the compare function.

Example

const customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725 },
  { name: 'Mary', birthday: '1985-3-14', credit: 515 },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325 },
  { name: 'Peter', birthday: '1992-1-10', credit: 875 },
  { name: 'Mike', birthday: '1997-5-14', credit: 825 }
];

// sort by birthday
customers.sort(function(a, b) {
  const aDate = new Date(a.birthday);
  const bDate = new Date(b.birthday);
  return aDate - bDate;
});
// output array
customers.forEach((customer) => {
  console.log(customer);
});

When you run the code array will be sorted on basis of the birthday property in ascending order. The order of the array is as follows: "1985-3-14", "1992-1-10", "1995-4-12", "1997-5-14", "1999-2-12".

Stay Ahead, Learn More

Sort By Key In Descending Order

To sort an array of objects in descending order you can perform 2 actions:

  1. Sort in descending order
  2. Sort in ascending order and then reverse the array

# Example using sort according to credit score

Reverse the sign of the return value of the compare function and your array will be sorted in descending order.

Example

const customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725 },
  { name: 'Mary', birthday: '1985-3-14', credit: 515 },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325 },
  { name: 'Peter', birthday: '1992-1-10', credit: 875 },
  { name: 'Mike', birthday: '1997-5-14', credit: 825 }
];

// sort in descending order
// using creadit score
customers.sort(function(a, b) {
  return b.credit - a.credit;
});
// output array
customers.forEach((customer) => {
  console.log(customer);
});

Applying the reverse() method on the array will reverse the array. So you can also sort the array in ascending order and then reverse the array. (But this cause extra overhead in the browser)

Example

const customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725 },
  { name: 'Mary', birthday: '1985-3-14', credit: 515 },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325 },
  { name: 'Peter', birthday: '1992-1-10', credit: 875 },
  { name: 'Mike', birthday: '1997-5-14', credit: 825 }
];

// sort in ascending order
customers.sort(function(a, b) {
  return a.credit - b.credit;
});
// reverse the array
customers.reverse();
// output array
customers.forEach((customer) => {
  console.log(customer);
});

Javascript sort array of objects by multiple properties

How would you sort an array of objects based on 2 properties?

Let's say you have to sort based on the customer's group and then on their credit score.

First, you will think that sort the array based on group and then chain another sort based on credit score. But this will not work. Here is how.

Example

const customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725, group: 'A' },
  { name: 'Mary', birthday: '1985-3-14', credit: 515, group: 'B' },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325, group: 'A' },
  { name: 'Peter', birthday: '1992-1-10', credit: 875, group: 'C' },
  { name: 'Mike', birthday: '1997-5-14', credit: 825, group: 'B' }
];

customers.sort((a, b) => {
  return a.group.localeCompare(b.group);
}).sort((a, b) => {
  return a.credit - b.credit;
});

// output array
customers.forEach((customer) => {
  console.log(customer.credit, customer.group);
});

You can see the output of the above code, well things didn't go well according to expectations.

So how can we do this sort?

We can sort this based on 2 properties by checking if the group of the first object is the same as the group of the second object. If it is the same then we will sort based on credit score. If it is different then we will sort based on the group.

Example

const customers = [
  { name: 'Sara', birthday: '1995-4-12', credit: 725, group: 'A' },
  { name: 'Mary', birthday: '1985-3-14', credit: 515, group: 'B' },
  { name: 'Zoya', birthday: '1999-2-12', credit: 325, group: 'A' },
  { name: 'Peter', birthday: '1992-1-10', credit: 875, group: 'C' },
  { name: 'Mike', birthday: '1997-5-14', credit: 825, group: 'B' }
];

customers.sort((a, b) => {
  if (a.group === b.group) {
    return a.credit - b.credit;
  } else {
    return a.group.localeCompare(b.group);
  }
});
// output array
customers.forEach((customer) => {
  console.log(customer.credit, customer.group);
});

Conclusion

We have learned and seen various examples of how javascript sort array of objects. You can use the above sort methods to create a visually appealing sortable table. Where you can set the sort order of the columns and you can also sort the table based on multiple properties. Use can use the code discussed in this article and modify it according to your own data.

To display output you can loop through the array of objects and print the properties of the object.