How to sort object in angular js with custom sort order?

Question

i want to show array of object's properties in a custom sorted way. following is the array

$scope.weekDays = [
            {
                "day" : "TUESDAY",
                "count": 10
            },
            {
                "day" : "MONDAY",
                "count": 20
            },
            {
                "day" : "WEDNESDAY",
                "count": 30
            },
            {
                "day" : "SUNDAY",
                "count": 60
            }];

if we print day from weekDays it is like TUESDAY, MONDAY, WEDNESDAY, SUNDAY

but i want to show in the order "SUNDAY", "MONDAY", "FRIDAY", "TUESDAY","WEDNESDAY"

for this i did the following

        $scope.orde = ["SUNDAY", "MONDAY", "FRIDAY", "TUESDAY","WEDNESDAY"];

        $scope.Sorted = [];

        $scope.SortCustomOrder = function() {
            var _c =0;
            for(var i = 0; i < $scope.orde.length; i++) {
                for (var _i = 0; _i < $scope.weekDays.length; _i++) {
                    if($scope.weekDays[_i].day==$scope.orde[i]) {
                        $scope.Sorted[_c] = $scope.weekDays[_i];
                        _c++;
                    }
                }
            }
        };

and printed $scope.Sorted. It prints what i said.

Is there any way to simplyfy this or any other mehtods in angularjs?

you could add unique, incrementing key and then oder by it

maurycy
– maurycy

2014-08-06 10:07:38 +00:00
Commented Aug 6, 2014 at 10:07 — maurycy
– maurycy, Commented Aug 6, 2014 at 10:07

runTarm · Accepted Answer · 2014-08-06 10:33:42Z

1

You could use a built-in orderBy filter like this:

app.controller('MainCtrl', function($scope, orderByFilter) {

  $scope.weekDays = [{
    "day": "TUESDAY",
    "count": 10
  }, {
    "day": "MONDAY",
    "count": 20
  }, {
    "day": "WEDNESDAY",
    "count": 30
  }, {
    "day": "SUNDAY",
    "count": 60
  }];

  var dateOrders = ["SUNDAY", "MONDAY", "FRIDAY", "TUESDAY", "WEDNESDAY"];

  $scope.Sorted = orderByFilter($scope.weekDays, function(item) {
    return dateOrders.indexOf(item.day);
  });
});

Example Plunker: http://plnkr.co/edit/IZfiavmZEpHf4hILdjQs?p=preview

answered Aug 6, 2014 at 10:33

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

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

1 Comment

maurycy Over a year ago

That's a clever way, didn't know you cna inject and use single filter like that

maurycy · Accepted Answer · 2014-08-06 10:20:21Z

0

I've made you a working plunker with an

$scope.weekDays = [
        {
            "id" : 3,
            "day" : "TUESDAY",
            "count": 10
        },
        {
            "id" : 2,
            "day" : "MONDAY",
            "count": 20
        },
        {
            "id" : 4,
            "day" : "WEDNESDAY",
            "count": 30
        },
        {
            "id" : 1,
            "day" : "SUNDAY",
            "count": 60
        }];
$scope.orderedWeekDays = $filter('orderBy')($scope.weekDays, 'id')

http://plnkr.co/edit/WdMQj7dJxuGsR2b9TRvZ?p=preview

answered Aug 6, 2014 at 10:20

maurycy

8,4201 gold badge30 silver badges44 bronze badges

3 Comments

prashanth-g Over a year ago

expecting sorting order is in another property. If it is like the above { "id" : 3, "day" : "TUESDAY", "count": 10 },.. we can print by | orderBy: weekDays.id.

maurycy Over a year ago

that's what I'm doing in my plunker, i provided two versions

prashanth-g Over a year ago

i am thinking about how to do without id in weekDays object. the order object is a separate one which says the days. ie.. order by the given object. like runTarm suggested

Manish Kr. Shukla · Accepted Answer · 2014-08-06 10:26:45Z

0

Well, for all such ordering and filtering operations, i usually go for any available library..

I heavily recommend this one : http://jscriptlinq.codeplex.com/..

It's pretty simple to sort your collection :

var arr = [{id: 'a', pos: 5},
    {id: 'd', pos: 2},
    {id: 'b', pos: 4},
    {id: 'c', pos: 3},
    {id: 'e', pos: 1}];

// col1 = ['e', 'd', 'c', 'b', 'a']
var col1 = $linq(arr)
    .orderBy(function (x) { return x.pos; })
    .select(function (x) { return x.id; })
    .toArray();

// col2 = ['a', 'b', 'c', 'd', 'e']
var col2 = $linq(arr)
    .orderBy("x => x.id")
    .select("x => x.id")
    .toArray();

answered Aug 6, 2014 at 10:26

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to sort object in angular js with custom sort order?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related