angularjs custom filter to check for values inside a data array

Question

I have two filters which filter the data according to the queue key in the data. Here is my code :

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456'
    },
  ];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item, function(term, key) {
          if (term != null && !isFound) {
            term = term.toString();
            term = term.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();
              if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queue}}</td>

      </tr>
    </table>
  </div>
</div>

the filters work perfectly.

But if I have the data like this where the queue is inside an array:

$scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'queue' :'456'}]},
];

note : there can be multiple objects in the queuerr like this:[{queue :'111'},{queue :'278'}]

How do I alter my current code so that the control goes inside the queuerr array and match the queue and return the result accordingly?

What is the possible value of searchfilter? Maybe easier to answer the question if you include what you want to do with the data types instead of only providing the code and have us reverse engineer from your code what it is you're trying to do. — HMR
– HMR, Commented Dec 10, 2018 at 8:07
If I understand this correctly you want to see if the values of $scope.Filter.queue are in $scope.servers queue and get the corresponding server name? — Alex G
– Alex G, Commented Dec 10, 2018 at 8:08
@hmr if you do console.log(searchfilter) the output is { "PAV": "111", "UAT": "456" } — node_man
– node_man, Commented Dec 10, 2018 at 8:11
Do the keys PAV and UAT have any meaning? Could you please update the question with what it is you want to do? — HMR
– HMR, Commented Dec 10, 2018 at 8:13
@AlexG i want to see if values of $scope.Filter.queue are in $scope.servers queuearr — node_man
– node_man, Commented Dec 10, 2018 at 8:13

ppollono · Accepted Answer · 2018-12-10 10:28:51Z

you have some conditions to change in the Angular.forEach take a look at the solution.

ServerB shows up in both searchs

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456',
      queuearr: [{
        queue: '456'
      }, {
        queue: '111'
      }]
    },
  ];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item, function(term, key) {
          // change here to check for arrays
          if (term || Array.isArray(term) && !isFound) {
            // use JSON.stringify here
            term = JSON.stringify(term);
            term = term.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();

              if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queue}}</td>

      </tr>
    </table>
  </div>
</div>

this is perfect. this one will always work. got to learn from you how useful JSON.stringify can be. Thank you so much :)

HMR · Accepted Answer · 2018-12-10 08:22:15Z

1

I think you can do it like this. It is not clear what it is exactly what you want to do because your code is overly complicated and badly aligned.

app.filter('searchFilter',function($filter) {
  return function(items, searchfilter) {
      const terms = Object.values(searchfilter).map(
          (val)=>val.toLowerCase(),
      );
      return items.filter((item) =>
          item.queuearr.some((q) => terms.includes(q.queue.toLowerCase())),
      );
  };
}

answered Dec 10, 2018 at 8:22

HMR

39.5k26 gold badges99 silver badges175 bronze badges

1 Comment

node_man Over a year ago

Thanks for your kind effort to help me

Alex G · Accepted Answer · 2018-12-10 08:25:37Z

1

If you want to filter $scope.servers with the values of the queue you can try this. Hope this helps.

const servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'queue' :'456'}]},
];

const itemsToCheck = { 'PAV':'111', 'UAT':'426' };

const filter = (arr, itemsToCheck) => arr.filter((item) => {

    for (let v of Object.values(itemsToCheck)) {

        const found = item.queuearr.find(({ queue }) => queue === v);

        if (found) return true;
    }

    return false;
});

console.log(filter(servers, itemsToCheck));

answered Dec 10, 2018 at 8:25

Alex G

1,9172 gold badges12 silver badges15 bronze badges

1 Comment

node_man Over a year ago

Thanks for your kind effort to help me

Roshan Patil · Accepted Answer · 2018-12-10 10:08:51Z

0

I have modified your snippet as per your given array. Its working fine as per your need.

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  /*
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456'
    },
  ];
  */
  $scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'queue' :'456'}]},
];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item.queuearr, function(term, key) {
          if (term.queue != null && !isFound) {
            term.queue = term.queue.toString();
            term.queue = term.queue.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();
              if (searchstring != "" && 
              term.queue.indexOf(searchstring) != -1 &&
              !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queuearr[0].queue}}</td>

      </tr>
    </table>
  </div>
</div>

answered Dec 10, 2018 at 10:08

Roshan Patil

1967 bronze badges

6 Comments

node_man Over a year ago

check my answer. Thanks for your kind effort to help me.

Roshan Patil Over a year ago

Yes checked but i haven't add another for each.it can also be work with same codebase. Check my solution correctly.

node_man Over a year ago

yea going to implement your solution :)

ppollono Over a year ago

this solution does not check multiple values in the array

ppollono Over a year ago

read in the question "note : there can be multiple objects in the queuerr like this:[{queue :'111'},{queue :'278'}]"

|

node_man · Accepted Answer · 2018-12-10 10:19:09Z

I solved the problem by adding another forEach loop to go through the queuearr when queue is inside an array:

var app =angular.module('app', []);

app.controller('mainController', function($scope) {
    // Data object
   $scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'},{'queue' :'456'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'queue' :'456'}]},
];

    // Filter defaults
    $scope.Filter = new Object();
    $scope.Filter.queue = {'PAV':'111',
                            'UAT':'456'
                        };
   
});

// Global search filter
app.filter('searchFilter',function($filter) {
        return function(items,searchfilter) {
//console.log(items);
             var isSearchFilterEmpty = true;
              angular.forEach(searchfilter, function(searchstring) {   
                  if(searchstring !=null && searchstring !=""){
                      isSearchFilterEmpty= false;
                  }
              });
        if(!isSearchFilterEmpty){
                var result = [];  
                angular.forEach(items, function(item) {  

                    var isFound = false;
                     angular.forEach(item.queuearr, function(z) {
//console.log(item.queue);     
		    angular.forEach(z, function(term,key) {
//console.log(z);
//console.log(item.queue);                         
                         if(term != null &&  !isFound){
                             term = term.toString();
                             term = term.toLowerCase();
                                angular.forEach(searchfilter, function(searchstring) {  
//console.log(searchfilter);    
                                    searchstring = searchstring.toLowerCase();
                                    if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){
                                       result.push(item);
                                        isFound = true;
                                    }
                                });

                         }
                            });
 });
                       });
            return result;
        }else{
        return items;
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<div ng-app="app">
    <div  ng-controller="mainController">
        <label>show 111</label>
        <input  type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"'  ng-false-value='""' />&nbsp;
        <label>show 456</label>
        <input  type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"'  ng-false-value='""' />&nbsp;
      
        <hr />
        <table width="100%" cellpadding="5">
            <tr>
                <th>Name</th>
               
               
            </tr>
            <tr ng-repeat="server in servers | searchFilter:Filter.queue">
                <td>{{server.name}}</td>
               
               
            </tr>
        </table>
    </div>
</div>

Now it's working perfectly

Collectives™ on Stack Overflow

angularjs custom filter to check for values inside a data array

5 Answers 5

2 Comments

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related