Tutorials Tonight
Follow Us

Javascript Sort Array Of Objects


In this tutorial, we will see how javascript sort array of objects. We will sort an array of objects based on the object property. We will also see different object properties with different data types to sort it.

    Table Of Contents

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

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.

Javascript sort array of objects by key value of the object property.

javascript sort array of objects

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

sort() method is a built-in method in javascript for sorting data. It accepts a compare function as an argument.

The compare function is used to compare two values and return a number. The number is used to determine the order of the two values. If the number is less than zero, the first value is less than the second value. If the number is zero, the values are equal. If the number is greater than zero, the first value is greater than the second value. Learn sort method in detail.

Syntax:

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

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. When you use the string property name in the compare function, the sort method will sort the array of objects based on the string property value.

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

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' }
];

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

2. Javascript sort array of objects by number

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

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' }
];

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

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, 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' }
];

// 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);
});

Javascript sort array of objects by key descending

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

Reverse the sign of 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, 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' }
];

// 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, 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' }
];

// 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 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

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.