How to filter by object property in angularJS

Question

I am trying to create a custom filter in AngularJS that will filter a list of objects by the values of a specific property. In this case, I want to filter by the "polarity" property(possible values of "Positive", "Neutral", "Negative").

Here is my working code without the filter:

HTML:

<div class="total">
    <h2 id="totalTitle"></h2>
    <div>{{tweets.length}}</div>
    <div id="totalPos">{{tweets.length|posFilter}}</div>
    <div id="totalNeut">{{tweets.length|neutFilter}}</div>
    <div id="totalNeg">{{tweets.length|negFilter}}</div>
</div>

Here is the "$scope.tweets" array in JSON format:

{{created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user       screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"},
 {created_at: "Date", text: "tweet text", user:{name: "user name", screen_name: "user screen name", profile_image_url: "profile pic"}, retweet_count: "retweet count", polarity: "Positive"}}

The best filter I could come up with as follows:

myAppModule.filter('posFilter', function(){
return function(tweets){
    var polarity;
    var posFilterArray = [];
    angular.forEach(tweets, function(tweet){
        polarity = tweet.polarity;
        console.log(polarity);
        if(polarity==='Positive'){
              posFilterArray.push(tweet);
        }
        //console.log(polarity);
    });
    return posFilterArray;
};
});

This method returns an empty array. And nothing is printed from the "console.log(polarity)" statement. It seems like I am not inserting the correct parameters to access the object property of "polarity."

Any ideas? Your response is greatly appreciated.

Nice question, but code could be reduced, big part of it is not relevant to the question. — setec
– setec, Commented Dec 4, 2014 at 8:26

Blackhole · Accepted Answer · 2013-07-22 17:35:25Z

219

You simply have to use the filter filter (see the documentation) :

<div id="totalPos">{{(tweets | filter:{polarity:'Positive'}).length}}</div>
<div id="totalNeut">{{(tweets | filter:{polarity:'Neutral'}).length}}</div>
<div id="totalNeg">{{(tweets | filter:{polarity:'Negative'}).length}}</div>

Fiddle

answered Jul 22, 2013 at 17:35

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

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

7 Comments

sh3nan1gans Over a year ago

Is there a way to filter the item list by passing a custom filter to an ng-click event outside of the ng-repeat statement? In this case, I want to place three "polarity" buttons above the results that filter based on the rating.

Blackhole Over a year ago

I'm not sure to understand. If you want to choose the polarity to filter, you can pass a scope variable instead of a plain text : filter:{polarity:polarityToFilter} where $scope.polarityToFilter is filled by a click on one of the three buttons. Is this what you are trying to do ?

sh3nan1gans Over a year ago

That seems like it could work. However, my app also needs to be able to delete individual list items.

sh3nan1gans Over a year ago

The problem with filtering is that a new array is created every time a filter is applied which breaks the tie between a filtered item and its original index in the unfiltered array. Is there a way to maintain the tie or is ng-hide my only option? Here's a tutorial for an alternative to filtering by using ng-hide: bennadel.com/blog/…

Blackhole Over a year ago

ngRepeat exposes an $index propertie on the local scope that you can also use.

|

Mo. · Accepted Answer · 2015-09-12 06:08:16Z

27

The documentation has the complete answer. Anyway this is how it is done:

<input type="text" ng-model="filterValue">
<li ng-repeat="i in data | filter:{age:filterValue}:true"> {{i | json }}</li>

will filter only age in data array and true is for exact match.

For deep filtering,

<li ng-repeat="i in data | filter:{$:filterValue}:true"> {{i}}</li>

The $ is a special property for deep filter and the true is for exact match like above.

edited Sep 12, 2015 at 6:08

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

answered May 22, 2015 at 12:05

Abel Terefe

1,50021 silver badges17 bronze badges

2 Comments

scaryguy Over a year ago

Simple and clean.

Satish Patro Over a year ago

Is this filter inbuilt or need to be written in both Angular & AngularJS?

Llewellyn Collins · Accepted Answer · 2014-05-04 19:01:26Z

23

You could also do this to make it more dynamic.

<input name="filterByPolarity" data-ng-model="text.polarity"/>

Then you ng-repeat will look like this

<div class="tweet" data-ng-repeat="tweet in tweets | filter:text"></div>

This filter will of course only be used to filter by polarity

answered May 4, 2014 at 19:01

Llewellyn Collins

2,3612 gold badges24 silver badges39 bronze badges

Comments

Alex Romanov · Accepted Answer · 2018-01-10 14:42:52Z

5

We have Collection as below:

Syntax:

{{(Collection/array/list | filter:{Value : (object value)})[0].KeyName}}

Example:

{{(Collectionstatus | filter:{Value:dt.Status})[0].KeyName}}

-OR-

Syntax:

ng-bind="(input | filter)"

Example:

ng-bind="(Collectionstatus | filter:{Value:dt.Status})[0].KeyName"

edited Jan 10, 2018 at 14:42

Alex Romanov

12k6 gold badges52 silver badges53 bronze badges

answered Jan 31, 2017 at 12:03

Rahul Modi

83614 silver badges21 bronze badges

Comments

Satish Singh · Accepted Answer · 2016-10-19 14:32:48Z

4

You can try this. its working for me 'name' is a property in arr.

repeat="item in (tagWordOptions | filter:{ name: $select.search } ) track by $index

answered Oct 19, 2016 at 14:32

Satish Singh

2,3493 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to filter by object property in angularJS

5 Answers 5

7 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related