angularJS - filtering JSON by key

Question

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
            }
        };
    }]);

Why not instead of each portfolio as a property, put it on a single property? — Bon Macalindong
– Bon Macalindong, Commented Jul 20, 2016 at 10:44
Hi Bon, I don't think I follow how that would change the filter working? I can change the dataset, since for now this is static — Miha Šušteršič
– Miha Šušteršič, Commented Jul 20, 2016 at 10:46
Then you can use the filter like this: ng-repeat="site in EN | filter: { portfolioType: portfolioFilter }", portfolioType is your new property if ever you decide to change it. So the portfolioType possible values would be (all, github, hasDemo and finished) — Bon Macalindong
– Bon Macalindong, Commented Jul 20, 2016 at 10:50
I also noticed that $scope.EN is not an array. You don't have [] — Bon Macalindong
– Bon Macalindong, Commented Jul 20, 2016 at 10:56
ah, the problem is that these are not exclusive, so one can have a github, be finished, and be categorized as all — Miha Šušteršič
– Miha Šušteršič, Commented Jul 20, 2016 at 10:57

Alexander Kravets · Accepted Answer · 2016-07-20 11:07:30Z

2

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];
}

answered Jul 20, 2016 at 11:07

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

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

2 Comments

Miha Šušteršič Over a year ago

are there any performance concerns when choosing between these do, or do they basically do the same?

Alexander Kravets Over a year ago

I dont think you'll ever notice the difference. Both approaches do the same thing - but on different levels.

Collectives™ on Stack Overflow

angularJS - filtering JSON by key

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related