Sort Array of Objects by String Property Value in JavaScript

The given task is to sort an array of objects by using string property value in JavaScript.

Assume there is an array of objects and we need to sort those elements by using the string property. In this below scenario, we are sorting array of objects by "company" property.


const array = [
   {Company: 'Oneplus', Manufacturing: 'China'},
   {Company: 'Samsung', Manufacturing: 'South korea'},
   {Company: 'Nothing', Manufacturing: 'India'}
];
Output = // it sorted the array of objects by "company" property.
[
   {"Company":"Nothing","Manufacturing":"India"},
   {"Company":"Oneplus","Manufacturing":"China"},
   {"Company":"Samsung","Manufacturing":"South korea"}
]

We can achieve this task, sorting of array objects by string property value by using sort() method and compare() function.

Sort()

The sort() method sorts all the elements in array object and will return the sorted array. it'll sort in ascending order by default.

Syntax

Following is the syntax of sort() method ?

Array.sort();

Compare function

The compare function will return negative, zero or positive values, depending upon the arguments.

The syntax of compare function will be,

function(a, b){return a - b}

Note ? The sort() function compares two values, sends the results to the compare function, and then sorts the output based on the result.

  • a will be sorted before b, if the outcome is Negative.

  • if it is 0 (zero), none happens.

  • b will be sorted before a, if the outcome is positive.

Here if we want to sort the array objects by string property value, we need to use sort() method which will sort all the array elements and the compare function, when we passed as an argument into the sort() method, it will define the sorting order and the sorting pattern.

Example 1

Sorted in ascending order

Following is an example where an array of objects has been sorted by using string property value ?


<!DOCTYPE html>
<html>
<head>
   <title>Sort array of objects by string property value</title>
</head>
<body>
   <button onClick="fun()"> Click to sort </button>
   <p id="para"></p>
   <script>
      function fun() {
         function func( object1, object2 ){
            if (object1.Company < object2.Company)
               return -1;
            if (object1.Company > object2.Company)
               return 1;
               return 0;
         }
         const array = [
            {Company: 'Oneplus', Manufacturing: 'China'},
            {Company: 'Samsung', Manufacturing: 'South korea'},
            {Company: 'Nothing', Manufacturing: 'India'}
         ];
         array.sort(func);
         document.getElementById("para").innerHTML = "After sorting "Company" in ascending order: " + JSON.stringify(array);
      };
   </script>
</body>
</html>

As we can see the output, we have used sort() method to sort the array object properties by string value. We have passed the compare() function as an argument of the sort() method to sort the company in ascending order.

Example 2

Sorted in descending order

Following is an example to sort array of objects by using string property value in descending order.


<!DOCTYPE html>
<html>
<head>
   <title>Sort array of objects by string property value</title>
</head>
<body>
   <button onClick="fun()"> Click to sort </button>
   <p id="para"></p>
   <script>
      function fun() {
         function func( object1, object2 ){
            if (object1.Manufacturing < object2.Manufacturing)
               return -1;
            if (object1.Manufacturing > object2.Manufacturing)
               return 1;
               return 0;
         }
         var array = [
            {Company: 'Oneplus', Manufacturing: 'China'},
            {Company: 'Samsung', Manufacturing: 'South korea'},
            {Company: 'Nothing', Manufacturing: 'India'}
         ];
         array.sort(func);
         document.getElementById("para").innerHTML = "After sorting "Manufacturing" in descending order: " + JSON.stringify(array);
      };
   </script>
</body>
</html>

As the output says, we have specified the compare() function that the sort should be done based on the "Manufacturing" in descending order.

Updated on: 2022-09-22T12:24:14+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements