Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to sort an array on multiple columns using JavaScript ?

  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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 :