current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

I want to filter nested array using angularjs filter in controller. following is my sample data 

dummy=[
    {
        category:'TV',
        data:[
            {
                title: 'Game of Thrones',
                path: 'some data1',
            },
            {
                title: 'Game of Thrones-SD',
                path: 'some data2'
            },
            {
                title: 'Game of Thrones-HD',
                path: 'some data3'
            },
            {
                title: 'Game of Thrones-Trailer 1',
                path: "some data4"
            },
            {
                title: 'Game of Thrones-Trailer 2',
                path: "some data5"
            },
            {
                title: 'Game of Thrones-Trailer 3',
                path: "Ssome data6"
            },
            {
                title: 'The Vampire Diaries ',
                path: 'some data7'
            },
            {
                title: 'The Vampire Diaries -SD',
                path: 'some data8'
            },
            {
                title: 'The Vampire Diaries -HD',
                path: 'some data9'
            },
            {
                title: 'The Vampire Diaries -Trailer 1',
                path: 'some data10'
            }
        ]
    },
    {
        category:'LIVE',
        data:[
            {
                title: 'Game of Thrones - Live Show',
                path: 'some data11'
            },
            {
                title: 'The Vampire Diaries  - Live Show',
                path: 'some data11'
            }
        ]
    }
];

for example i want to filter the data on title, so if i search "game of thrones" i want to get following data

    {
        category:'TV',
        data:[
            {
                title: 'Game of Thrones',
                path: 'some data1',
            },
            {
                title: 'Game of Thrones-SD',
                path: 'some data2'
            },
            {
                title: 'Game of Thrones-HD',
                path: 'some data3'
            },
            {
                title: 'Game of Thrones-Trailer 1',
                path: "some data4"
            },
            {
                title: 'Game of Thrones-Trailer 2',
                path: "some data5"
            },
            {
                title: 'Game of Thrones-Trailer 3',
                path: "Ssome data6"
            },
        ]
    },
    {
        category:'LIVE',
        data:[
            {
                title: 'Game of Thrones - Live Show',
                path: 'some data11'
            }
        ]
    }

I think similar question has been asked here Angularjs filter nested object

and i tried to use the following code in my controller but it did not worked 

var filterdData = $filter('filter')(content, {data: [{title: $scope.filterKey}]});
share|improve this question
    
Is there any reason why you need to use $filter? Can't you just use a custom filter function? –  Wayne Ellery Feb 8 at 10:23
    
AngularJS version? –  tasseKATT Feb 8 at 15:20
    
@tasseKATT : yes angular version one –  Sohail Anwer Faruqui Feb 8 at 18:13
1  
One as in 1.0.0? That is really old. –  tasseKATT Feb 8 at 19:03
    
@tasseKATT: sorry man typo mistake. its v1.3.12 –  Sohail Anwer Faruqui Feb 8 at 20:14

1 Answer 1

up vote 1 down vote

How to do it from HTML:

<input ng-model="query" />
<div ng-repeat="item in items | filter: { data: { title: query }}">
  <span class="category">{{item.category}}</span>
  <div ng-repeat="nested in item.data | filter: { title: query }" class="nested">
    {{nested.title}} - {{nested.path}}
  </div>
</div>

The first filter is to find all category objects that have items in their nested data array that matches the search query.

This filter alone is not enough since as long there is a single match in the nested array, the entire category object will count as a match.

The second filter makes sure that only those items in the nested data array that matches the query shows.

Demo: http://plnkr.co/edit/7pPFQUqQNmHYphDhiYJq?p=preview

From controller:

$scope.query = '';

$scope.filter = function(query) {

  $scope.filteredCategories = $filter('filter')($scope.items, {
    data: {
      title: query
    }
  });

  $scope.filteredCategories.forEach(function(category) {
    category.filteredData = $filter('filter')(category.data, {
      title: query
    });
  });
};

$scope.filter($scope.query);

And HTML:

<input ng-model="query" ng-model-options="{ debounce: 500 }" ng-change="filter(query)" />
<div ng-repeat="category in filteredCategories">
  <span class="category">{{category.category}}</span>
  <div ng-repeat="nested in category.filteredData" class="nested">
    {{nested.title}} - {{nested.path}}
  </div>
</div>

Demo: http://plnkr.co/edit/uzDbWzAgd2kZDasQsFn1?p=preview

share|improve this answer
    
Thanks for the answer, but I am looking for a way to do it on controller (javascript) –  Sohail Anwer Faruqui Feb 8 at 22:19
    
Ah, I apologize. It's bascially the same principle. You just have to watch out so you don't modify the original arrays. I updated my answer. –  tasseKATT Feb 9 at 7:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.