How to sort an array of object by two fields in JavaScript ?
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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
- Before clicking on the button:
- After clicking on the button: