The task is to sort the JavaScript array on multiple columns with the help of JavaScript. There are two approaches that are discussed below.
Approach 1: Combine the multiple sort operations by OR operator and comparing the strings. For comparing the string, we will use the localeCompare() method.
Example: This example implements the above approach. First sorting on four columns and then on the two columns.
<!DOCTYPE HTML> <html> <head> <title> How to sort an array on multiple columns using JavaScript? </title> </head> <body style="text-align:center;"> <h1>GeeksForGeeks</h1> <p id="GFG_UP"></p> <button onclick="GFG_Fun();"> Click Here </button> <p id="GFG_DOWN"></p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); var arr = [ [1, 'GFG', 2, 'Geek'], [3, 'g', 1, 'for'], [2, 'portal', 0, 'Geeks'], ]; up.innerHTML = "Click on the button to sort " + "the array on multiple columns on " + "strings.< br > [" + arr[0] + "] < br > [" + arr[1] + "] < br > [" + arr[2] + "]"; function GFG_Fun() { arr.sort(function (a, b) { return a[3].localeCompare(b[3]) || a[1].localeCompare(b[1]); }); down.innerHTML = "[" + arr[0] + "]<br>[" + arr[1] + "]<br>[" + arr[2] + "]"; } </script> </body> </html> |
Output:
Approach 2: If we sorting the elements on numbers then use the Comparison operators to compare the values. The idea is to first perform the operation on a single column and if the values are similar then move to the next column and do the same.
Example: This example implements the above approach.
First sorting on three columns and then on one column.
<!DOCTYPE HTML> <html> <head> <title> How to sort an array on multiple columns using JavaScript? </title> </head> <body style="text-align:center;"> <h1>GeeksForGeeks</h1> <p id="GFG_UP"></p> <button onclick="GFG_Fun();"> Click Here </button> <p id="GFG_DOWN"></p> <script> var up = document.getElementById('GFG_UP'); var down = document.getElementById('GFG_DOWN'); var arr = [ [1, 'GFG', 2, 'Geek'], [3, 'g', 0, 'for'], [2, 'portal', 0, 'Geeks'], ]; up.innerHTML = "Click on the button to sort " + "the array on multiple columns on " + "strings.< br > [" + arr[0] + "] < br > [" + arr[1] + "] < br > [" + arr[2] + "]"; function GFG_Fun() { arr.sort(function (a, b) { var o1 = a[2]; var o2 = b[2]; var p1 = a[0]; var p2 = b[0]; if (o1 < o2) return -1; if (o1 > o2) return 1; if (p1 < p2) return -1; if (p1 > p2) return 1; return 0; }); down.innerHTML = "[" + arr[0] + "]<br>[" + arr[1] + "]<br>[" + arr[2] + "]"; } </script> </body> </html> |
Output:
