How to sort a data collection of objects using jQuery

Question

I have a dynamic collection of objects which I bind to jQuery Template on my page. This collection of objects which I have on client side is a List<T> returned from my server, where T can be any object of any class. For example:

Class Employee
{
 string Name;
 int Id;
 int age;
}

Class Companies
{
  int CompId;
  string CompanyName;
  string CompanyLocation;
}

Now Based on user request I will send List<Employee> or List<Companies> to client side. Now I was just wondering if we can sort this list at client side using jquery. Any help would be much appreciated.

What language is that? Also, you sort in JavaScript, jQuery is a wrapper around the DOM api. — Roatin Marth, Oct 23 '12 at 14:37
Check this http://stackoverflow.com/questions/5503900/how-to-sort-an-array-of-objects-with-jquery-or-javascript — Vinit Prajapati, Oct 23 '12 at 14:38
the class are in C#. I return the collection of objects of these class to my client side. I would be happy get them sorted using jQuery or javaScript. For example lets say when I recieve list of employee, i wanted to sort by their age/name/id. — Tijo Thomas, Oct 23 '12 at 14:40
@VinitPrajapati In the example you told it is not a genric array. In my case my collection can recieve any kind of object collection, it is not neccessary that it will always get name,id,value..collection — Tijo Thomas, Oct 23 '12 at 14:44
@TijoThomas: change your sample code to something you've tried. For example getting the collection in JavaScript would give us an idea of where you are stuck. — Roatin Marth, Oct 23 '12 at 14:45
@RoatinMarth Whatever I am trying to do has already been explained. However adding to whats said so far my client side code receives the list of employees or companies in form of json data. This particular list I want to sort based on properties of employee if I get employees list and sort using the fields of company if I get list of companies. — Tijo Thomas, Oct 24 '12 at 01:30
@RoatinMarth Please dont down vote if you cant understand generics,C# and its usage with jQuery Template. Because this question is very important to me and I posted it here hoping to get an answer believing that stackoverflow is collection of good technocrats. — Tijo Thomas, Oct 24 '12 at 01:41
How is it supposed to sort the object though, by what? How is the client supposed to know what properties are available to sort by if they are totally generic? — Evan Trimboli, Oct 24 '12 at 01:47
@EvanTrimboli I am trying to bind the genric list to grid built using jquery template. Which I am successfully able to bind. Now when user clicks on a column header based on that column field i need to sort entire list and the rebind to grid template. So now I have the information on which list is to be sorted and also the list. — Tijo Thomas, Oct 24 '12 at 05:16

score 0 · Accepted Answer · answered Oct 24 '12 at 06:32

This might not be exactly what you want, but it should give you a good enough idea to proceed:

var list = [{
    prop1: 'a',
    prop2: 5
}, {
    prop1: 'b',
    prop2: 4
}, {
    prop1: 'c',
    prop2: 3
}, {
    prop1: 'd',
    prop2: 2
}, {
    prop1: 'e',
    prop2: 1
}];

function sort(propName, direction) {
    var dirOffset = direction === 'desc' ? -1 : 1;

    list.sort(function(a, b){
        a = a[propName];
        b = b[propName];

        if (a === b) {
            return 0;
        }

        var out = a < b ? -1 : 1;
        return out * dirOffset;
    });
}

function log(propName) {
    list.forEach(function(item){
        console.log(item[propName]);
    });
}

function sortAndLog(propName, direction) {
    console.log('Sorted by', propName, direction);
    sort(propName, direction);
    log(propName);
    console.log('------------------------------------');
}

sortAndLog('prop1', 'desc');
sortAndLog('prop1', 'asc');
sortAndLog('prop2', 'asc');
sortAndLog('prop2', 'desc');

Perhaps if I call the function $sort? – Evan Trimboli Oct 24 '12 at 20:26 — Evan Trimboli, Oct 24 '12 at 20:26

score 0 · Answer 2 · answered Oct 24 '12 at 06:49

0

jQuery is a library to manipulate the DOM, not the best when it comes to strings. I would say you check underscore.js.

Underscore documentations are great and simple. You will find how to achieve what you want easily.

answered Oct 24 '12 at 06:49

Ahmad Alfy

13,107
6
65
99

How to sort a data collection of objects using jQuery

2 Answers2