Skip to content
Related Articles

Related Articles

How to sort an array on multiple columns using JavaScript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 30 Jun, 2020
View Discussion
Improve Article
Save Article

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!