Skip to content
Related Articles
Open in App
Not now

Related Articles

How to sort an array of object by two fields in JavaScript ?

Improve Article
Save Article
  • Last Updated : 21 Dec, 2022
Improve Article
Save Article

In this article, we are given an array of objects and the task is to sort the array of elements by 2 fields of the object. There are two methods to solve this problem which are discussed below: 

Approach 1:

  • First compare the first property, if both are unequal then sort accordingly.
  • If they are equal then do the same for the second property.

Example: This example implements the above approach. 

html




<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h3> How to sort an array of object
        by two fields in JavaScript ?
    </h3>
  
    <p id="GFG_UP" style="font-size:
        15px; font-weight: bold;">
    </p>
  
    <button onclick="gfg_Run()">
        Click Here
    </button>
  
    <p id="GFG_DOWN" style="color:green;
        font-size: 20px; font-weight: bold;">
    </p>
  
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var arr = [
            {first: 3, second: 4},
            {first: 3, second: 1},
            {first: 1, second: 10}
        ];
          
        el_up.innerHTML = "Click on the button to sort "
                + "the array accordingly.<br>Array = '"
                + JSON.stringify(arr[0]) + ", "
                + JSON.stringify(arr[1]) +", "
                + JSON.stringify(arr[2]) + "'";
          
        arr.sort(function (a, b) {
            var af = a.first;
            var bf = b.first;
            var as = a.second;
            var bs = b.second;
              
            if(af == bf) {
                return (as < bs) ? -1 : (as > bs) ? 1 : 0;
            } else {
                return (af < bf) ? -1 : 1;
            }
        });
          
        function gfg_Run() {
            el_down.innerHTML = "'" + JSON.stringify(arr[0])
                    + ", " + JSON.stringify(arr[1]) + ", "
                    + JSON.stringify(arr[2]) + "'";
        }
    </script>
</body>

Output:

Sort an array of object by two fields

Sort an array of object by two fields

Approach 2:

  • First compare the first property, If both are unequal then sort accordingly.
  • If they are equal then do the same for the second property, this example is following the same approach but uses OR Gate to reduce the code.

Example: This example implements the above approach. 

html




<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h3>
        How to sort an array of object
        by two fields in JavaScript ?
    </h3>
  
    <p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
    </p>
  
    <button onclick="gfg_Run()">
        Click Here
    </button>
  
    <p id="GFG_DOWN" style="color:green;
        font-size: 20px; font-weight: bold;">
    </p>
  
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        var arr = [
            {first: 3, second: 4},
            {first: 3, second: 1},
            {first: 1, second: 10}
        ];
          
        el_up.innerHTML = "Click on the button to sort "
                + "the array accordingly.<br>Array = '"
                + JSON.stringify(arr[0]) + ", " +
                JSON.stringify(arr[1]) +", " +
                JSON.stringify(arr[2]) + "'";
          
        arr.sort(function (a, b) {
            return a.first - b.first || a.second - b.second;
        });
          
        function gfg_Run() {
            el_down.innerHTML = "'" + JSON.stringify(arr[0])
                    + ", " + JSON.stringify(arr[1]) + ", "
                    + JSON.stringify(arr[2]) + "'";
        }
    </script>
</body>

Output:

Sort an array of object by two fields

Sort an array of object by two fields


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!