Sort JSON Object Array Based On A Key Attribute In JavaScript

Priyaranjan K S

6y506.1k18100Article

JavaScript JSON ArrayKey Attribute in JavaScriptSort JSON Object Array

18 Comments

Join the conversation! Your thoughts help the community grow.

Ashik Ashik8y ago
In case, i sort array by Experience. the result should sort by Experience. emp John showing me first. bt in the core function John should show the last one
- Nitro King7y ago
  In the sample code given, the value for the key "Experience" is a string(with quotes). Hence while using the compare function for Experience, the array gets sorted according to its ASCII. Just remove the quotes for Experience (values) to make it an integer and the compare function will sort it correctly. For example: Replace "Experience": "12", with "Experience": 12,
ketan patel8y ago
Super cool. worked great for me. Just twiked it for asc and desc.
Asfend Yar10y ago
Nice Share
Santhakumar Munuswamy11y ago
Good one
Mohammed Ibrahim11y ago
nice
Priyaranjan K S11y ago
Thanks Humayun Kabir Mamun
Priyaranjan K S11y ago
Thanks Gowtham K
Priyaranjan K S11y ago
Thanks for reading Mukesh Kumar
Priyaranjan K S11y ago
Thank You Sibeesh Venu
Priyaranjan K S11y ago
Thanks Nilesh Jadav
Gowtham K11y ago
Good Share
Sibeesh Venu11y ago
Nice Share
Mukesh Kumar11y ago
Good One
Humayun Kabir Mamun11y ago
Nice...
Nilesh Jadav11y ago
Nice one sir !!
Priyaranjan K S11y ago
Thanks Harshad Pansuriya
Harshad Pansuriya11y ago
Nice one

Introduction

JavaScript has a native Sort method that can be used to sort arrays. However, based on the nature of the array, the implementation varies.

data=["a","z","c","w","j"];
alert (data.sort( ));

The above sort method would sort the array without any issues as it is an array of string elements.

JSON return type is an array of objects. Hence sort method cannot be used directly to sort the array. However, we can use a comparer function as the argument of the ‘sort’ method to get the sorting implemented.

Comparer function has the following format:

function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}

The return value from the comparer function basically identifies the sort order of subsequent array elements. Summarized as the following:

If ComparingFunction(a, b) is < 0, then a will be sorted to a lower index than b. Thus a will come first.
If ComparingFunction (a, b) returns 0, then a and b will retain their respective positions. There won’t be any change in sort order.
If ComparingFunction (a, b) is > then 0, then b will be sorted to a lower index than a. Thus b will come first.

The comparer function can be called to sort the JSON array as below:

var array = [{
"EmployeeName": "John",
"Experience": "12",
"Technology": "SharePoint"
}, {
"EmployeeName": "Charles",
"Experience": "9",
"Technology": "ASP.NET"
}, {
"EmployeeName": "Jo",
"Experience": "3",
"Technology": "JAVA"
}, {
"EmployeeName": "Daine",
"Experience": "7",
"Technology": "Sql Server"
}, {
"EmployeeName": "Zain",
"Experience": "6",
"Technology": "C#"
}];
//Comparer Function
function GetSortOrder(prop) {
return function(a, b) {
if (a[prop] > b[prop]) {
return 1;
} else if (a[prop] < b[prop]) {
return -1;
}
return 0;
}
}
array.sort(GetSortOrder("EmployeeName")); //Pass the attribute to be sorted on
document.write("Sorted Employee Names : ");
for (var item in array) {
document.write("<br>" + array[item].EmployeeName);
}
array.sort(GetSortOrder("Technology")); //Pass the attribute to be sorted on
document.write("<br><br> Sorted Technology Names : ");
for (var item in array) {
document.write("<br>" + array[item].Technology);
}

Output

Sorted Employee Names:

Charles

Daine

John

Zain

Sorted Technology Names:

ASP.NET

JAVA

SharePoint

Sql Server

This helper method comes in handy when AJAX calls return JSON array which has to be sorted and dynamically bound to the html DOM for end user display.

You can play around with the JSFiddle I have created here for better understanding.

Reference

Array.prototype.sort()