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.
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:
Share your thoughts in the comments
Please Login to comment...