IntroductionIn this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes. ImplementationAs usual create web project and then add JQuery library from Google in to page as like shown below, Html Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="objectsortdemo.aspx.cs" Inherits="objectsortdemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to Sort Objects Array using JQuery</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<form id="form1" runat="server" style="font-family: Verdana; font-size: 11px;">
<div style="font-size: 14px; font-weight: bold;">
Before sorted
</div>
<div id="main1">
</div>
<div style="font-size: 14px; font-weight: bold;">
After sorted
</div>
<div id="main2">
</div>
</form>
</body>
</html>
Let’s write code create object array and then sort by numeric and string property in objects. Sort by Numeric attributeHtml Code <script language="javascript" type="text/javascript">
$(document).ready(function() {
var members = [
{ "name": "Dhana", "id": 003, "email": "dhan@gmailcom" },
{ "name": "Abhji", "id": 004, "email": "abji@gmailcom" },
{ "name": "RRaveen", "id": 001, "email": "vrra@gmailcom" },
{ "name": "Jana", "id": 002, "email": "jana@gmailcom" },
{ "name": "John", "id": 005, "email": "john@gmailcom" }
];
$.each(members, function(index, value) {
$("#main1").append("<p><strong>Id:</strong>" + value.id + "- <strong>Name:</strong>" + value.name + "- <strong>Email:</strong>" + value.email + "</p>");
})
;
members = members.sort(function(a, b) {
return a.id - b.id;
});
$.each(members, function(index, value) {
$("#main2").append("<p><strong>Id:</strong>" + value.id + "- <strong>Name:</strong>" + value.name + "- <strong>Email:</strong>" + value.email + "</p>");
});
});
</script>
Code Explanation1. I have create a array with members object with name, id and email as attributes
2. Then use the sort method to array with id(numeric)
3. Finally print output in within div. Now run and see the sorted objects like below, sort by id in asc order Sort by String attributeHtml code <script language="javascript" type="text/javascript">
$(document).ready(function() {
var members = [
{ "name": "Dhana", "id": 003, "email": "dhan@gmailcom" },
{ "name": "Abhji", "id": 004, "email": "abji@gmailcom" },
{ "name": "RRaveen", "id": 001, "email": "vrra@gmailcom" },
{ "name": "Jana", "id": 002, "email": "jana@gmailcom" },
{ "name": "John", "id": 005, "email": "john@gmailcom" }
];
$.each(members, function(index, value) {
$("#main1").append("<p><strong>Id:</strong>" + value.id + "- <strong>Name:</strong>" + value.name + "- <strong>Email:</strong>" + value.email + "</p>");
})
;
members = members.sort(function(a, b) {
if (a.name < b.name) { return -1 };
if (a.name > b.name) { return 1 };
return 0;
});
$.each(members, function(index, value) {
$("#main2").append("<p><strong>Id:</strong>" + value.id + "- <strong>Name:</strong>" + value.name + "- <strong>Email:</strong>" + value.email + "</p>");
});
});
</script>
In above code, I have used same logic to sort by name as like used for sort by ID, but compare each object name compare is done with additional checking to sort and add again to members array. Output sorted by name in asc order That's all, now take look live demo for sorting. Live DemoSort custom objects array Download Sample CodeDownload source files -1 kb ConclusionIn this article, we have learned how to sort custom objects with JQuery by attributes in objects. Sort with numeric and string type as well also included in demonstration. Hopes help and thank you for reading. |