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

Question

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.

stackoverflow.com/questions/31398614/… have a look at my answer to this question u can filter already filtered array in the view there is a codepen too — stackg91
– stackg91, Commented Aug 21, 2015 at 6:35

Community · Accepted Answer · 2017-05-23 10:26:37Z

1

First of all - why You use instances.instance? It it not principally, use players.instances = [];
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;

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Aug 21, 2015 at 8:02

user3335966

2,7494 gold badges32 silver badges33 bronze badges

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

4 Comments

Jacky Over a year ago

Thanks for the solution. I have instance inside instances and it is xml response from a web service. I cannot change web service. I am converting response to json using xml2json. This is xml structure that I am receiving:<Player> <Name>string</Name> <Shirt>string</Shirt> <Instances><Instance>Location>string</Location> </Instance><Instance><Location>string</Location></Instance></Instances></Player>

user3335966 Over a year ago

@Jacky sad, but not critical. Just change all instances ti instances.instance & add xxx.instances && to check of existence; jsfiddle update;

Jacky Over a year ago

Good solution, marked it as solution.I am having a strange issue. When I filter for single new instance of a location, It is showing all instances where location is null. For example, When I filter with "la" it is showing two extra results.link

user3335966 Over a year ago

@Jacky OK. My English is not understood allow me to tell you the theoretical part. You must add testFl2 to testFl1 if filter === 'location'; This code need refactoring but it working;

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related