Javascript programming articles and tutorials for beginner | Anjan Dutta

Sort array of objects in javascript by property

Sort array of objects in javascript by property

We, the UI developers get to sort array of objects in javascript very often. When we deal with a json API response, we often receive an array of objects. Responses are sorted up to an extent, but in UI, when we try to represent the data in multiple forms, we need modification in data.

Today, I am going to explain how to sort an array of objects in javascript. To be more specific, I am going to describe various methods of sorting the objects in an array based upon a common property value from each objects.

Prerequisite

Before trying to sort array of objects in javascript, we must check if all objects in that array has a common property name.

For example, below is our sample object:

let obj = [
{a: 2, b: 1, c: 3},
{a: 7, c: 8},
{b: 0, c: 5}
];

Can you identify the common property name among all the array objects? Yes, ā€˜cā€™ is the common property among all the objects. So, we can sort these objects by the property ā€˜cā€™.

Next, we have to check what is the data type of the common object property. An object can have multiple types of properties. Type means data type of any property. In this article, I have explained the three most commonly used type based sorting.

Three most commonly used object property based sorting in javascript.

  • Sort array of objects in javascript by a string property
  • Sort array of objects in javascript by number property
  • Sort array of objects in javascript by date property

There are many approaches that we can use to code all three of these solutions. Manually we can compare object to object by property values and sort objects. Go for it and give it a try if you love solving algorithms problems.

Or, we can use inbuilt javascript functions to quickly code these solutions. For this article we are going to use the sort() function.

If you do not know what is a sort() function then do not worry. I am going to explain it next.

The sort function is powerful. It is easy to use and reduces the requirement of any external library for sorting.

The sort() function takes only one parameter, a compare function. Compare function contains the logic that performs an in-place comparison between two values and applies sort logically.

Below is an example, to sort an integer array in ascending order.

var numbers = [40, 100, 1, 5, 25, 10];
numbers.sort(function(a, b){return b-a});
console.log(numbers); // [1, 2, 5, 10, 25, 40, 100]

In the above function, the comparison function is simple.

If you interchange a-b to b-a in the function, then you will get an array sorted in descending order.

Similarly, we will implement all three problems by changing the logic in the compare function. Hope you have got a good brief of the javascript sort() function by now.

Next we are going to declare a sample object that we will use in our solution.

Sample array of objects

This is the sample javascript object we are going to use in our next examples.

1let cars= [
2 {
3 name: 'Swift',
4 batchNumber: 391,
5 mfgDate: 'July 1, 2019'
6 },
7 {
8 name: 'Corolla',
9 batchNumber: 142,
10 mfgDate: 'January 19, 2019'
11 },
12 {
13 name: 'Zen',
14 batchNumber: 213,
15 mfgDate: 'March 23, 2019'
16 }
17];

For ease of understanding we have declared a simple array of objects here. Make sure to check the objects you will receive in your programs.

Sort array of objects in javascript by a string property

The cars array objects have a string property name. Below is the code which will sort all the objects in ascending order depending on the name property value.

1cars.sort((a, b) => {
2
3 if (a.name < b.name) {
4 return -1;
5 }
6 if (a.name > b.name) {
7
8 return 1;
9
10 }
11
12 return 0;
13
14});

Result array:

1let cars= [
2 {
3 name: 'Corolla',
4 batchNumber: 142,
5 mfgDate: 'January 19, 2019'
6 },
7 {
8 name: 'Swift',
9 batchNumber: 391,
10 mfgDate: 'July 1, 2019'
11 },
12 {
13 name: 'Zen',
14 batchNumber: 213,
15 mfgDate: 'March 23, 2019'
16 }
17 ];

Sort an array of objects by number

The cars array objects have a number property batchNumber. Below is the code which will sort all the objects in ascending order depending on the batchNumber property value.

cars.sort((a, b) => {
return a.batchNumber - b.batchNumber;
});

Result array:

1let cars= [
2
3 {
4 name: 'Corolla',
5 batchNumber: 142,
6 mfgDate: 'January 19, 2019'
7 },
8 {
9 name: 'Zen',
10 batchNumber: 213,
11 mfgDate: 'March 23, 2019'
12 },
13 {
14 name: 'Swift',
15 batchNumber: 391,
16 mfgDate: 'July 1, 2019'
17 }
18];

Sort an array of objects by date

The cars array objects have a number property mfgDate. Below is the code which will sort all the objects in ascending order depending on the mfgDate property value.

cars.sort((a, b) => {
return new Date(a.mfgDate) - new Date(b.mfgDate);
});

Result array:

1let cars= [
2
3 {
4 name: 'Corolla',
5 batchNumber: 142,
6 mfgDate: 'January 19, 2019'
7 },
8 {
9 name: 'Zen',
10 batchNumber: 213,
11 mfgDate: 'March 23, 2019'
12 },
13 {
14 name: 'Swift',
15 batchNumber: 391,
16 mfgDate: 'July 1, 2019'
17 }
18];

These are the 3 ways to sort array of objects in javascript by its key or property value. Please comment if you need any brief.

Happy to help.

Edit this page on GitHub