Geek Answers Handbook

Javascript (angularJS): multi-field filter

For example, I have a list like this (which I use with ng-repeat):

var myList = [ {id: 1, name: 'Peter Ollison', type: 'Driver', status: 'Working'}, {id: 2, name: 'Maya Nameson', type: 'Manager', status: 'Not'}, {id: 3, name: 'Iki Jonny', type: 'Driver', status: 'Paused'}, {id: 4, name: 'Nikolay Ivanov', type: 'Manager', status: 'Working'}, {id: 5, name: 'Nikolay Ivanov', type: 'Sales manager', status: 'Not'}, {id: 6, name: 'Scotty Deperson', type: 'Boss', status: 'Working'}, ]

and I have filters:

 nameFilter: ['Peter Ollison', 'Nikolay Ivanov'] typeFilter: ['Manager', 'Driver'] statusFilter: ['Working']

How is this possible in a filter function to combine all of these filters? And return only those items from the list that are equal to filters? BUT!!! I can:

filter only by name or only by type, or by 2 fields, or by all of them

How can I filter my list?

for example, if I filter by 3 filter arrays at a time, I should get the result:

 [{id: 1, name: 'Peter Ollison', type: 'Driver', status: 'Working'}, {id: 4, name: 'Nikolay Ivanov', type: 'Manager', status: 'Working'}]

now I can filter only one value in the controller, and I got several field filters ((

+5
source share
3 answers
 $scope.showIssueItem = function (item) { var resultAssigneeCount = 0, resultTypeCount = 0, resultStatusCount = 0; if ($scope.nameFilterArr.length > 0) { angular.forEach($scope.nameFilterArr, function(value) { if (item.name === value) { resultAssigneeCount++; } }); }else{ resultAssigneeCount = 1; } if ($scope.typeFilterArr.length > 0) { angular.forEach($scope.typeFilterArr, function(value) { if (item.type === value) { resultTypeCount++; } }); }else{ resultTypeCount = 1; } if ($scope.statusFilterArr.length > 0) { angular.forEach($scope.statusFilterArr, function(value) { if (item.status === value) { resultStatusCount++; } }); }else{ resultStatusCount = 1; } return resultAssigneeCount>0 && resultTypeCount>0 && resultStatusCount>0; };
0
source 
 function contains(a, obj) { var i = a.length; while (i--) { if (a[i] === obj) { return true; } } return false; } $scope.showItemOrNot = function (item) { var match = []; var filters = [ { attr : 'assignee', source : $scope.assigneeFilterArr }, { attr : 'type', source : $scope.typeFilterArr }, { attr : 'status', source : $scope.statusFilterArr } ]; for(var x in filters) { if(filters[x].source.length > 0) { match.push(contains(filters[x].source,item[filters[x].attr])); } } return !contains(match,false); };
0
source

Using Nested Array.protoype.filter()

 var filterProps = ['name','type','status']; var filteredData = myList.filter(function(item){ return filterProps.filter(function(prop){ var filter = filters[prop +'Filter']; return !filter || !filter.length || filter.indexOf(item[prop]) >-1; }).length === filterProps.length; }) 

 var myList = [ {id: 1, name: 'Peter Ollison', type: 'Driver', status: 'Working'}, {id: 2, name: 'Maya Nameson', type: 'Manager', status: 'Not'}, {id: 3, name: 'Iki Jonny', type: 'Driver', status: 'Paused'}, {id: 4, name: 'Nikolay Ivanov', type: 'Manager', status: 'Working'}, {id: 5, name: 'Nikolay Ivanov', type: 'Sales manager', status: 'Not'}, {id: 6, name: 'Scotty Deperson', type: 'Boss', status: 'Working'}, ] var filters = { nameFilter: ['Peter Ollison', 'Nikolay Ivanov'], typeFilter: ['Manager', 'Driver'], statusFilter: ['Working'] } var filteredData = myList.filter(function(item){ var filterProps = ['name','type','status'] return filterProps.filter(function(prop){ var filter = filters[prop +'Filter']; return !filter || !filter.length || filter.indexOf(item[prop]) >-1; }).length===filterProps.length; }); console.log(filteredData)
0
source

More articles:


All Articles