Javascript (angularJS): filter by multiple field

Question

For example i have such list (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 filter arrays:

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

how is it possible in filter function to combain all this filters? And to return only such items from the list, which are equal to filter arrays? BUT!!! I can have:

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

how is it possible to filter my list?

for example if i filter by 3 filter arrays in one time i should get as result:

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

now i can filter only by one value in controller, and i got stucked with multiple fields filters((

You want to filter by matching at the same time any of the values per property? So the name may be peter or nikolay, and type may be manager or driver and status must be working? — Leonardo Lana
– Leonardo Lana, Commented Sep 15, 2016 at 14:59

Dev Shah · Accepted Answer · 2016-09-15 15:15:50Z

0

$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;
};

edited Sep 15, 2016 at 15:15

answered Sep 15, 2016 at 15:12

Dev Shah

3021 silver badge7 bronze badges

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

1 Comment

byCoder Over a year ago

if i have resultStatusCount === [], it won't output anything

Leonardo Lana · Accepted Answer · 2016-09-15 15:16:52Z

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);
};

charlietfl · Accepted Answer · 2016-09-15 15:39:16Z

Using nested Array.protoype.filter()'s

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)

Collectives™ on Stack Overflow

Javascript (angularJS): filter by multiple field

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related