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

13 Dec, 2019
Given an array of objects and the task is to sort the array 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.
<!DOCTYPE HTML> <html>   <head>     <title>         How to sort an array of object        by two fields in JavaScript ?    </title></head>   <body style = "text-align:center;">           <h1 style = "color:green;" >         GeeksForGeeks     </h1>          <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>   </html>
Output:
Before clicking on the button:
After clicking on the button:
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 using OR Gate to reduce the code.
Example: This example implements the above approach.
<!DOCTYPE HTML> <html>   <head>     <title>         How to sort an array of object        by two fields in JavaScript ?    </title></head>   <body style = "text-align:center;">          <h1 style = "color:green;" >         GeeksForGeeks     </h1>          <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>   </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-array
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?