How to sort an array on multiple columns using JavaScript ?

30 Jun, 2020
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:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.