How to Order JSON data in the controller using AngularJS $filter

Question

I have a data array like below in the controller

$scope.sampleArray=[{
    'title': 'SampleTitleOne',
    'description': 'SampleDescriptionOne',
    'category': 'Saving'
},
{
    'title': 'SampleTitleTwo',
    'description': 'SampleDescriptionTwo',
    'category': 'Saving'
},
{
    'title': 'SampleTitle3',
    'description': 'SampleDescription3',
    'category': 'Current'
},
{
    'title': 'SampleTitleIV',
    'description': 'SampleDescriptionIV',
    'category': 'Current'
},
{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Group'
},
{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Group'
},
{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Mixed'
},
{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Other'
}];

I have order the above array based on user input. Suppose user input array is

$scope.order = ['Other', 'Group', 'Mixed', 'Saving', 'Current'];

After applying the filter the output should be like below

$scope.sampleArray=[{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Other'
},
{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Group'
},
{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Group'
},

{
    'title': 'SampleTitleFive',
    'description': 'SampleDescriptionFive',
    'category': 'Mixed'
},
{
    'title': 'SampleTitleOne',
    'description': 'SampleDescriptionOne',
    'category': 'Saving'
},
{
    'title': 'SampleTitleTwo',
    'description': 'SampleDescriptionTwo',
    'category': 'Saving'
},
{
    'title': 'SampleTitle3',
    'description': 'SampleDescription3',
    'category': 'Current'
},
{
    'title': 'SampleTitleIV',
    'description': 'SampleDescriptionIV',
    'category': 'Current'
}];

Is there any way to apply angular $filter to achieve this?

You want to order in ng-repeat or only in variable?

bipin patel
– bipin patel

2017-02-15 13:51:10 +00:00
Commented Feb 15, 2017 at 13:51 — bipin patel
– bipin patel, Commented Feb 15, 2017 at 13:51
in the variable itself

Seshu Vuggina
– Seshu Vuggina

2017-02-15 13:51:49 +00:00
Commented Feb 15, 2017 at 13:51 — Seshu Vuggina
– Seshu Vuggina, Commented Feb 15, 2017 at 13:51

Torben Pi Jensen · Accepted Answer · 2017-02-15 13:53:04Z

1

Use the orderBy filter

$scope.sampleArray = $filter('orderBy')($scope.sampleArray, function(item) { return $scope.order.indexOf(item.category);});

answered Feb 15, 2017 at 13:53

Torben Pi Jensen

8909 silver badges28 bronze badges

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

3 Comments

Seshu Vuggina Over a year ago

Thanks!! How can I filter if I change the $scope.order variable something like $scope.order = ['Other', 'Group', 'Mixed']; in this case scenario, $scope.sampleArray should contain only 'other', 'group' and 'mixed' related records in the array

Torben Pi Jensen Over a year ago

then add $scope.samleArray = $filter('filter')($scope.sampleArray,function(item) { return $scope.order.indexOf(item.category) !== -1; }) before the sorting

Torben Pi Jensen Over a year ago

I would do something like $scope.originalData = [....]; $scope.$watchCollection('order', function(newOrder) { var filteredData = $filter('filter')($scope.originalData ,function(item) { return $scope.order.indexOf(item.category) !== -1; }); $scope.filteredOrderedData = $filter('orderBy')(filteredData, function(item) { return $scope.order.indexOf(item.category);}) })

user218046 · Accepted Answer · 2017-02-15 13:52:50Z

0

You should check orderBy filter and somehow change something in it.

answered Feb 15, 2017 at 13:52

user218046

6438 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to Order JSON data in the controller using AngularJS $filter

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related