Sort Array of Objects by String Property Value in Javascript

While working with javascript objects and arrays, developers often need to sort the object array based on string property value. This article demonstrates easy ways to sort an array of objects by string property values using various example illustrations. Here, we will also be discussing a dynamic function using which one can provide the name of string property to sort the array of objects. Also, using this dynamic function, one can specify the sort order to determine if the sort needs to be ascending or descending.

Table of Contents:

Javascript’s sort() method sorts all the array elements and returns the sorted array.

The compare() function, when passed as an argument in the sort() method, defines the sorting order and the sorting mechanism.

Sort an Array of Objects using sort() and compare() Ascending

Example:-

Sort the below array of objects based on the personFirstName property in ascending order

[ { personFirstName: ‘Veronica’, personLastName: ‘Smith’, city: ‘Chicago’}, { personFirstName: ‘Eva’, personLastName: ‘Johnson’, city: ‘Santiago’}, { personFirstName: ‘Paul’, personLastName: ‘Brown’, city: ‘Washington’}]

Code:-

var myArray = [
  { personFirstName: 'Veronica', personLastName: 'Smith', city: 'Chicago'},
  { personFirstName: 'Eva', personLastName: 'Johnson', city: 'Santiago'},
  { personFirstName: 'Paul', personLastName: 'Brown', city: 'Washington'}
];
// write your own comparison function for ascending 
function compare( obj1, obj2 ) 
{
// compare the objects based on personFirstName property
    if ( obj1.personFirstName < obj2.personFirstName ){
      return -1;
    }
    if ( obj1.personFirstName > obj2.personFirstName ){
      return 1;
    }
    return 0;
}
console.log("Sorting By First Name Ascending:");
console.log(myArray.sort(compare));

Output:-

Sorting By First Name Ascending:
[
  {
    personFirstName: 'Eva',
    personLastName: 'Johnson',
    city: 'Santiago'
  },
  {
    personFirstName: 'Paul',
    personLastName: 'Brown',
    city: 'Washington'
  },
  {
    personFirstName: 'Veronica',
    personLastName: 'Smith',
    city: 'Chicago'
  }
]

Explanation:-

In the above example, we use the sort() method to sort property values of string type. We also pass the compare() function in the argument of the sort() method to provide the correct definition of the sort specifying to sort based on personFirstName and ascending order.

Sort an Array of Objects using sort() and compare() Descending

Example:-

Sort the below array of objects based on the personFirstName property in descending order

[ { personFirstName: ‘Veronica’, personLastName: ‘Smith’, city: ‘Chicago’}, { personFirstName: ‘Eva’, personLastName: ‘Johnson’, city: ‘Santiago’}, { personFirstName: ‘Paul’, personLastName: ‘Brown’, city: ‘Washington’}]

Code:-

var myArray = [
  { personFirstName: 'Veronica', personLastName: 'Smith', city: 'Chicago'},
  { personFirstName: 'Eva', personLastName: 'Johnson', city: 'Santiago'},
  { personFirstName: 'Paul', personLastName: 'Brown', city: 'Washington'}
];
// write your own comparison function for descending 
function compare( obj1, obj2 ) 
{
    if ( obj1.personFirstName > obj2.personFirstName ){
      return -1;
    }
    if ( obj1.personFirstName < obj2.personFirstName ){
      return 1;
    }
    return 0;
}
console.log("Sorting By First Name Descending:");
console.log(myArray.sort(compare));

Output:-

Sorting By First Name Descending:
[
  {
    personFirstName: 'Veronica',
    personLastName: 'Smith',
    city: 'Chicago'
  },
  {
    personFirstName: 'Paul',
    personLastName: 'Brown',
    city: 'Washington'
  },
  {
    personFirstName: 'Eva',
    personLastName: 'Johnson',
    city: 'Santiago'
  }
]

Explanation:-

Here, we wrote our compare() function to provide the definition of the sort specifying that the sort should be done based on personFirstName and in descending order.

Sort an Array of Objects using Dynamic Function to Pass Property Name and Sorting Order as Arguments

Example:-

Sort the below array of objects based on the personLastName property in ascending order

[ { personFirstName: ‘Veronica’, personLastName: ‘Smith’, city: ‘Chicago’}, { personFirstName: ‘Eva’, personLastName: ‘Johnson’, city: ‘Santiago’}, { personFirstName: ‘Paul’, personLastName: ‘Brown’, city: ‘Washington’}]

Code:-

var myArray = [
  { personFirstName: 'Veronica', personLastName: 'Smith', city: 'Chicago'},
  { personFirstName: 'Eva', personLastName: 'Johnson', city: 'Santiago'},
  { personFirstName: 'Paul', personLastName: 'Brown', city: 'Washington'}
];
// dynamic function to sort by any string property either ascending or descending
function sortObjectArray(_array, _property, _ascDescFlag) 
{
  _ascDescFlag = _ascDescFlag || 1;
  _array.sort(function compare(obj1, obj2) {
      let returnValue = 0;
      // make comparisons based on the property value passed in the argument
      if (obj1[_property] > obj2[_property]) {
        // multiply with _ascDescFlag to make the sort either descending or ascending
        // if _ascDescFlag is positive sort will be ascending
        // if _ascDescFlag is negative sort will be descending
        returnValue = 1 * _ascDescFlag;
      } else if (obj1[_property] < obj2[_property]) {
        returnValue = -1 * _ascDescFlag;
      }
      return returnValue;
  });
  return _array; 
}
// Sort based on personLastName in Ascending Order
console.log(sortObjectArray(myArray,"personLastName",1));

Output:-

[
  {
    personFirstName: 'Paul',
    personLastName: 'Brown',
    city: 'Washington'
  },
  {
    personFirstName: 'Eva',
    personLastName: 'Johnson',
    city: 'Santiago'
  },
  {
    personFirstName: 'Veronica',
    personLastName: 'Smith',
    city: 'Chicago'
  }
]

Explanation:-

  • Here, we wrote a function that can sort on any property of the object based on the arguments passed and in the desired sorting order.
  • _array: The first argument of the function is the name of the array to be sorted.
  • _property: The function’s second argument is the name of the string property based on which sorting needs to be done.
  • _ascDescFlag: The third argument of the function is the flag that decides if the sorting needs to be done in ascending or descending order. If the value of _ascDescFlag is positive or zero, then sorting will be done in ascending order. If the value of _ascDescFlag is negative, then sorting will be sone in ascending order.

Example:-

Sort the below array of objects based on the personLastName property in descending order

[ { personFirstName: ‘Veronica’, personLastName: ‘Smith’, city: ‘Chicago’}, { personFirstName: ‘Eva’, personLastName: ‘Johnson’, city: ‘Santiago’}, { personFirstName: ‘Paul’, personLastName: ‘Brown’, city: ‘Washington’}]

Code:-

//using the function created in above example with descending order
console.log(sortObjectArray(myArray,"personLastName",-1));

Output:-

[
  {
    personFirstName: 'Veronica',
    personLastName: 'Smith',
    city: 'Chicago'
  },
  {
    personFirstName: 'Eva',
    personLastName: 'Johnson',
    city: 'Santiago'
  },
  {
    personFirstName: 'Paul',
    personLastName: 'Brown',
    city: 'Washington'
  }
]

Read More:

I hope this article helped you sort an array of objects by string property value in javascript. Good Luck !!!

Advertisements

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top