Skip to content
Related Articles

Related Articles

Improve Article

Sort array of objects by string property value in JavaScript

  • Last Updated : 28 Mar, 2019

The array of objects can be sort by using user defined function. This function compares the array of objects by its property. For example, the first example compares the l_name of objects and if l_name is small then it place into left otherwise place it into right position.

Example 1: This example sorts the array of objects by l_name property.




<!DOCTYPE html> 
<html
  
<head
    <title
        Sort array of objects
    </title>
</head
          
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id="demo2">GFG_Object = [ <br>
        { "f_name": "Geeks", "l_name": "_1" },
        <br><br>
        { "f_name": "for", "l_name": "_2" },
        <br><br>
        { "f_name": "GFG", "l_name": "_3" }
        <br>];
    </p
      
    <button onClick="fun()">
        sort
    </button>
      
    <p id="GFG"></p
      
    <!-- Script to compare the object and
        sort its content -->
    <script>
        function fun() {
            function compare(a, b) {
                if (a.l_name < b.l_name)
                    return -1;
                if (a.l_name > b.l_name)
                    return 1;
                return 0;
            }
            var GFG_Object = [ 
                { f_name: 'Geeks', l_name: '_2' },
                { f_name: 'for', l_name: '_1' },
                { f_name: 'GFG', l_name: '_3' }
            ];
              
            GFG_Object.sort(compare);
              
            document.getElementById("GFG").innerHTML
                    = JSON.stringify(GFG_Object);
        }
        </script
    </body
</html>                    

Output:

  • Before click on the button:
  • After click on the button:

Example 2: This example sorts the array of objects by f_name property.




<!DOCTYPE html> 
<html
  
<head
    <title
        Sort array of objects
    </title>
</head
          
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id="demo2"> GFG_Object = [ <br>
        { "f_name": "Geeks", "l_name": "_1" },
        <br><br>
        { "f_name": "for", "l_name": "_2" },
        <br><br>
        { "f_name": "GFG", "l_name": "_3" }
        <br>];
    </p
      
    <button onClick="fun()">
        sort
    </button>
      
    <p id="GFG"></p
  
    <script>
        function fun() {
            function compare(a, b) {
                if (a.f_name < b.f_name)
                    return -1;
                if (a.f_name > b.f_name)
                    return 1;
                return 0;
            }
            var GFG_Object = [ 
                { f_name: 'Geeks', l_name: '_2' },
                { f_name: 'for', l_name: '_1' },
                { f_name: 'GFG', l_name: '_3' }
            ];
              
            GFG_Object.sort(compare);
              
            document.getElementById("GFG").innerHTML
                    = JSON.stringify(GFG_Object);
        }
    </script
</body
  
</html>                    

Output:

  • Before click on the button:
  • After click on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :