AngularJS - Filtering with multi-level JSON

Question

I have a complex dataset in JSON that includes location data that is hierarchal in nature, with a parent of region, child obj of state/country/province, and a sub-child obj of cities. I'm trying to filter on each of these data parts.

The filters on the other values (phase and numbers) work correctly, but the location data doesn't. I'm assuming it's because of the hierarchal nature of that data, but I can't find any filtering examples of hierarchal data in Angular to figure out what I'm doing wrong.

Plunkr: http://plnkr.co/edit/vaKU7l?p=preview

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

app.controller('MainCtrl', function($scope, $anchorScroll, $location, $http) {

	$scope.cart = [];

	$scope.addToCart = function(index) {
		$scope.cart.push(index);

		$scope.cartCount = $scope.cart.length;
	}



	$scope.activeRow = function(index) {
		$scope.selectedRow = index;

		$location.hash();
		$anchorScroll('anchor-' + index);

	}


	$scope.gotoAnchor = function(x) {
		var newHash = 'anchor' + x;


	}
    
        // GET data
        $scope.dataObject = data.List;
        $scope.locationObject = data.Locations;


});

body{background:#eee;}
div.cart{display:block;height:70px;background:silver;margin-left:20px;width:200px;padding:5px 10px;margin-bottom:20px;margin-top:20px;}
.cart h1{color:#fff;line-height:20px;}
.item-list-wrapper{height:400px;width:90%;border:1px solid #ddd;overflow-y:scroll;margin-left:20px;}
.item-list-wrapper table td{padding:10px;vertical-align:middle;margin-bottom:10px;font-size:12px;}
.item-list{height:auto;width:100%;margin-bottom:10px;box-shadow:0 2px 2px rgba(0,0,0,0.2);border:1px solid #fff;background:#efefe4;}
.col-num{width:100px;}
.col-compound{width:80px;}
.filters{width:100%;clear:both;margin-left:20px;}
.filters select{width:200px;}
.filters column{height:100px;width:200px;display:inline-block;margin:0;padding:0;}
.filters select{display:inline-block;}
.region{font-weight:bolder;}
.state{font-weight:normal;}




     
        
        AngularJS Plunker
        
        
        
        
        
        
        
        
        
        
        
        
        
        


  
    
    



    

    Filter results
    
				
				
				
				
				

			
				
				
			
        
    
  
  
  
  
  
    Cart: {{cartCount}}


 
	 
	 	
			{{data.Phase}}
			{{data.Number}}
			{{data.Compound}}
			
        {{ location.Region}}: 
  				{{site.State}}
					
				
			
			Add

bmarti44 · Accepted Answer

There might be a way to do this with just angular, but you can definitely do this with custom filters. Here's an example -

http://plnkr.co/edit/CLLBoJkfMVCgxqzMNjaC?p=preview

.filter('byCountry', function(){

    return function(items, location) {
        var filtered = [];

        if (!location || !items.length) {
          return items;
        }

        items.forEach(function(itemElement, itemIndex) {
          itemElement.Locations.forEach(function(locationElement, locationIndex) {
            if (locationElement.Region === location.Region) {
              filtered.push(itemElement);
              return false;
            }
          });
        });

        return filtered;
    };
})

AngularJS - Filtering with multi-level JSON

Answers (1)

Related Questions