CODEWITHSUNDEEP
javascriptangularjs
shabarinath
shabarinath

Reputation: 593

How to make filters work with array in angularjs

Iam trying to create a custom filter to filter matching array of values in angularjs. Array Structure below

["tag1","tag2"]

Now I need to filter all objs having tags matching id1,id2.. Below is the filter I have tried

var autoFilter = angular.module("autoFilters",[]);
autoFilter.filter('arrayData', function (){
return function(){
    return ["id1","id2"];
}
//$scope.arrayValues = ["id1","id2"];

});

and UI code below

<li style="cursor:pointer" ng-cloak class="list-group-item" ng-repeat="values in suggestionResults | arrayData">{{values.id}} -- {{values.title}}</li>

But Data is not showing up. Can you help me out where Iam doing wrong. Plunker Code available below

plunker here

Upvotes: 1

Views: 57

Answers (1)

Andrew Adam
Andrew Adam

Reputation: 1582

see the code below :) This is not the best approach in my opinion and will definitely have some performance issue with larger lists, but it does the work (now I used indexOf(2) but there you can pass any truthy/falsy argument)

var autoFilter = angular.module("autoFilters",[]);

autoFilter.controller("filterController",['$scope','$http', function ($scope,$http) {

    $scope.searchSuggest = function(){
        //$http({method: 'GET', url: 'json/searchSuggestions.json'}).success(function(data) {
        $http.get("assets.json").then(function(response) {
            //var str = JSON.stringify(response);
            //var arr = JSON.parse(str);
            $scope.suggestionResult = response.data;
            console.log($scope.suggestionResult);
            //$scope.arrayData = ["asset_types:document/data_sheet","asset_types:document/brochure"];

        }).catch(function activateError(error) {
            alert('An error happened');
        });         
    }
    $scope.showProduct = function(){

    }
}]);

autoFilter.filter('arrayData', function (){
    return function(data){
      // if you are using jQuery you can simply return $.grep(data, function(d){return d.id.indexOf('2') >-1 });
        return data.filter(function(entry){
          return entry.id.indexOf('2') > -1
        })
    }
});

Having experienced working with large lists I would, however, suggest you to avoid using a separate filter for this and rather manipulate it in the .js code. You could easily filter the data when you query it with your $http.get like:

$scope.suggestionResult = response.data.filter(function(){
  return /* condition comes here */
}

This way you are not overloading the DOM and help the browser handling AngularJS's sometimes slow digest cycle.

If you need it to be dynamic (e.g. the filtering conditions can be changed by the user) then add an ng-change or $watch or ng-click to the modifiable information and on that action re-filter $scope.suggestionResult from the original response.data

Upvotes: 1

Related Questions