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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
