CODEWITHSUNDEEP
angularjsfilter
Jacky
Jacky

Reputation: 3

angularjs filter nested array-using-checkboxes-with-angularjs

I am following this approach to filter nested json response. I have a nested property like this:

instances:{
     instance:[
     {cname:'name1', location:'pa', price:40, model:'2014' },     
     {cname:'name1', location:'ga', price:30 , model:'2014'},
     {cname:'name1', location:'ga', price:20, model:'2010' }        
    ]}

I can filter by top level properties using the above mentioned example but not the child properties. I have modified above example to show nested properties of my json here.http://jsfiddle.net/jackAndy/qygL2m01/4/. I am new to angularjs.

Upvotes: 0

Views: 534

Answers (1)

user3335966
user3335966

Reputation: 2745

  1. First of all - why You use instances.instance? It it not principally, use players.instances = [];
  2. Use Group functions only 1 time after data loading; Watching filters - it's not necessary in this case;

Function for get filters values (I use underscore uniq function, You can use Your own algorithm for this):

$scope.getFieldsValues = function(field){
    var result = [];
    for(var i = 0; i < $scope.players.length; i++){
        result.push($scope.players[i][field]);
    }
    return _.uniq(result);
};

Filter for players:

$scope.testFl = function(el){
    for(var filter in $scope.filters){
        var filterArray = [];
        for(var i in $scope.filters[filter]){
            if($scope.filters[filter][i]) filterArray.push(i);
        }

        //You can make array with instances properties & compare with it;
        if(filter === 'location'){
            if(el.instances && el.instances.length > 0){
                var intersection = el.instances.filter(function(n) {
                    return filterArray.indexOf(n[filter]) != -1
                });
            } else if(filterArray.length > 0){return false;}
        } else {
            if(filterArray.length > 0 && filterArray.indexOf(el[filter]) === -1) return false;
        }

    }
    return true;
};

Template:

<li ng-repeat="player in players | filter:testFl" >

Filter for instances:

$scope.testFl2 = function(el){
    var filterArray = [];
    for(var i in $scope.filters.location){
        if($scope.filters.location[i]) filterArray.push(i);
    }
    return filterArray.length > 0 && filterArray.indexOf(el.location) === -1 ? false : true;
};

Template:

<span ng-repeat="loc in player.instances | filter:testFl2" >

Fiddle for this;

UPDATE:
Function for count:

$scope.getCount = function(field, value){
    var obj = {};
    obj[field] = value;
    return _.where($scope.players, obj).length;
};

Update fiddle - update underscore, add count function;

I hope this will help you;

For answer were used:
Add underscore to jsfiddle;
variable property name in where underscore.js;

Upvotes: 1

Related Questions