Issue in Sorting Integer values In AngularJs Custom Sort function

Question

I am having problem in my custom sorting method. I have a json structure wherein integer values are being passed as String. While sorting I need to sort the list based on the integer value, but it is being sorted as String values.

I have created a JsFiddle for the same:

http://jsfiddle.net/ayan_2587/vjF2D/14/

The angular code is as follows:-

var app = angular.module('myModule', []);

app.controller('ContactListCtrl', function ($scope, $timeout, $filter) {

var sortingOrder = 'price';
$scope.sortingOrder = sortingOrder;

$scope.sortorder = '-sort';
$scope.contacts = [{
    "name": "Richard",
    "surname": "Stallman",
    "price": "7200"
}, {
    "name": "Donald",
    "surname": "Knuth",
    "price": "34565"
}, {
    "name": "Linus",
    "surname": "Torvalds",
    "price": "23454"
}];

$scope.setLoading = function (loading) {
    $scope.isLoading = loading;
}


$scope.layoutDone = function (value) {
    console.log(value);
    $scope.setLoading(true);

     $timeout(function() { 
    // take care of the sorting order
    if ($scope.sortingOrder !== '') {

        if(value == 'sort'){
        $scope.contacts = $filter('orderBy')($scope.contacts, $scope.sortingOrder, false);
        }
        else if(value == '-sort'){
        $scope.contacts = $filter('orderBy')($scope.contacts, $scope.sortingOrder, true);
        }
    }
            $scope.setLoading(false);
        }, 1000);

}

$scope.loadFeed = function(url) {       
  $scope.setLoading(true);          
}

$scope.loadFeed();
});



app.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.repeatDone);
        }
    }
})

Please help me out !!!

Just because i'm curious: Why do you pass your integer values as a string? — Wottensprels
– Wottensprels, Commented Oct 15, 2013 at 6:42
@Cherniv But I cannot change my data on the server side(i.e cant remove the quotes from the Json data). Also, I am unable to understand wherein would I be able to put parseInt method on every contact object to convert from string to integer. — ayan_2587
– ayan_2587, Commented Oct 15, 2013 at 6:43
@Sprottenwels Cant help that... that is legacy code from server side :( — ayan_2587
– ayan_2587, Commented Oct 15, 2013 at 6:43
You could cycle through each object in contacts and parse it to a new array, obviously while parseInt()'ing those values. Would'nt be the nicest solution, though — Wottensprels
– Wottensprels, Commented Oct 15, 2013 at 6:48

Nikos Paraskevopoulos · Accepted Answer · 2013-10-15 10:14:14Z

3

SInce you sort in JS, you can allways use Array.sort() - at least on modern browsers-, passing it a sort function like:

function sortAsc(a,b) {
    a = parseInt(a.price);
    b = parseInt(b.price);
    return a > b ? 1 : (a === b ? 0 : -1);
}

And then execute the sorting like:

if(value == 'sort'){
    $scope.contacts.sort(sortAsc);
}

See forked fiddle: http://jsfiddle.net/sRruf/ (the initial state is not sorted)

The sort property (here price) can be parameterized with a little extra work.

And here is a version using the orderBy filter and a custom predicate: http://jsfiddle.net/sRruf/1/

edited Oct 15, 2013 at 10:14

answered Oct 15, 2013 at 7:09

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ayan_2587 Over a year ago

Cool solution.... although I was looking for something more Angularish !!! But nevertheless, solved my problem.. Thanks a lot :)

Nikos Paraskevopoulos Over a year ago

The "Angularish" would be to implement this principle parametrically in a filter and use the filter instead of the change event+layoutDone(). This is not difficult to implement.

ayan_2587 Over a year ago

Could you please elaborate more on this ? I would really really like to understand how we can do this in an angular manner ....

Collectives™ on Stack Overflow

Issue in Sorting Integer values In AngularJs Custom Sort function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related