Miha Šušteršič Miha Šušteršič - 4 months ago 10
JSON Question

angularJS - filtering JSON by key

I have a JSON data set that I want to filter by a select option value. I've bound the select to an ng-model, but now I can't get the filter to work. What am I doing wrong?

My html:

<div class="row portfolio" ng-controller="portfolioController">
<div class="small-12 portfolioFilterContainer">
<label class="portfolioFilterLabel">Filter:
<select class="portfolioFilterSelect" ng-model="portfolioFilter">
<option value="all">All</option>
<option value="gitHub">Has repository</option>
<option value="hasDemo">Has a working demo</option>
<option value="finished">Finished</option>
</select>
</label>
</div>
<div class="small-12">
<div class="row siteContainer" ng-repeat="site in EN | filter: portfolioFilter">
<div class="small-4 columns">
<img ng-if="site.left" class="portfolioSiteImage" ng-src="{{site.img}}">
</div>
<div class="small-8 columns">
<h1 class="portoflioSiteHeading"><a href="#">{{site.heading}}</a></h1>
<p class="portfolioSiteParagraph">{{site.desc}}</p>
</div>
<div class="small-4 columns">
<img ng-if="!site.left" class="portfolioSiteImage" ng-src="{{site.img}}">
</div>
</div>
</div>
</div>


my controller:

.controller('portfolioController', ['$scope', function($scope) {
$scope.portfolioFilter = 'all';
$scope.EN = {
w1: {
img: "http://lorempixel.com/400/400",
heading: "mySite",
desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
left: true,
gitHub: false,
hasDemo: false,
finished: false,
all: true
},
w2: {
img: "http://lorempixel.com/400/400",
heading: "mySite",
desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
left: false,
gitHub: false,
hasDemo: false,
finished: false,
all: true
},
w3: {
img: "http://lorempixel.com/400/400",
heading: "mySite",
desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
left: true,
gitHub: false,
hasDemo: false,
finished: false,
all: true
},
w4: {
img: "http://lorempixel.com/400/400",
heading: "mySite",
desc: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus eum itaque, ex. Nisi rem est voluptas, nobis, a dolorum harum error architecto recusandae omnis, possimus quasi deserunt pariatur commodi assumenda.",
left: false,
gitHub: false,
hasDemo: false,
finished: false,
all: true
}
};
}]);

Answer

You can't use the regular filter since $scope.EN is not an array. You could use ng-if instead:

ng-repeat="site in EN" ng-if="site[portfolioFilter]"

If you prefer filter - change the data to be an array and use custom filter:

ng-repeat="site in sites | filter: myFilter"

where myFilter is defined this way:

$scope.myFilter = function(val) {
    return val[$scope.portfolioFilter];
}