Open In App
Related Articles

How to sort an array on multiple columns using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
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:

Last Updated : 30 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads