How to filter json using angular filter

Question

Hey i have little problem with angular filter. I import post from wordpress, and i would really like to filter them by tags, like, now show only post with tag = ENG, or show only post with tag = GER. This is how my html looks like

    <div ng-controller="ThreeMainPosts">
        <div ng-repeat="threePost in threePosts | filter : {data.data.posts[0].tags[0].slug = 'ENG'} ">
            <div three-post="threePost">
                <h1>CONTENT</h1></div>
        </div>
    </div>

Controller

myModule.controller('ThreeMainPosts', function($scope, $location, WordPressNewsService) {
var postsPerPage = 3;
var orderBy = 0;
WordPressNewsService.getPosts(postsPerPage, orderBy).then(function(data) {
    $scope.threePosts = data.data.posts;
});

}); and the json

    { id: 312, type: "post", slug: "la-bamba-3", url: "sada2", … }
    attachments:[]
    author:{ id: 1, slug: "ds", name: "hnews", first_name: "", last_name: "", … }
    categories:[{ id: 6, slug: "ludzie", title: "Ludzie", description: "", parent: 0, post_count: 2 }]
    tags: [{ id: 32, slug: "en", title: "EN", description: "EN", post_count: 1 }]
    url:"http://xxx0.co,/?p=312"
    previous_url:"http://hirsch-news.iterative.pl/?p=306"
    status:"ok"

I tried make the filter in the controller but i can only do this for single element, for example:

if(data.data.posts[0].tags[0].slug == "ENG"){
    $scope.threePosts = data.data.posts;
}

Any ideas guys? Have nice day! :)

alphapilgrim · Accepted Answer · 2017-04-06 15:24:21Z

4

Made a quick filter, can change it up to your needs. Hope it helps. Angular $filter Docs

Here's a Codepen with angular's built in $filter.

myModule
  .controller('ThreeMainPosts', function($scope, $location, WordPressNewsService, $filter) {
    var postsPerPage = 3;
    var orderBy = 0;
    var tagToSortBy = 'EN'
    WordPressNewsService.getPosts(postsPerPage, orderBy).then(function(data) {
      $scope.threePosts = $filter('postFilter')(data.data.posts, tagToSortBy);
    });
  })
  .filter('postFilter', function() {
    return function(post, tag) {
      if (post.tags.slug === tag) {
        return post;
      }
    };
  });

If you wanted to do this in the template it would be like this.

<div ng-controller="ThreeMainPosts">
  <div ng-repeat="post in threePosts | postFilter : 'ENG' ">
    <div three-post="threePost">
      <h1>CONTENT</h1>
    </div>
  </div>
</div>

edited Apr 6, 2017 at 15:24

answered Apr 6, 2017 at 15:03

alphapilgrim

3,96510 gold badges33 silver badges63 bronze badges

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

4 Comments

Matt Over a year ago

Here is the documentation for the Angular $filter. docs.angularjs.org/api/ng/filter/filter This works great for simple filters, but if you need something more complex, you can construct your own filters using angular.module("yourModule").filter().

alphapilgrim Over a year ago

@Matt, that's what I did above. a custom filter. just chained it off his controller, didn't want to over-complicate the answer. but thanks for the link will include as an edit for reference.

Matt Over a year ago

Oh, I glanced over this answer quickly. Then another an could be to use Angular's provided filter

Lapsio Over a year ago

Ohhh god! This works perfect, thanks you so much, you saved many hours of my life :)

Mtihc · Accepted Answer · 2017-04-06 14:58:59Z

1

I think you want the Array.filter function, in combination with Array.some

var postsWithTagSlugENG = data.data.posts.filter(function (post) {
    return post.tags.some(function (tag) {
        return tag.slug == "ENG"
    });
});

answered Apr 6, 2017 at 14:58

Mtihc

2192 silver badges13 bronze badges

1 Comment

Lapsio Over a year ago

Thanks for your time :). I will just use the code from the guy above.

Matt · Accepted Answer · 2017-04-06 15:26:12Z

1

Here is another approach using the filter provided by Angular:

In javascript:

$filter('filter')(data.data.posts, tagToSortBy);

In HTML:

<input type="text" name="searchTag" placeholder="Filter by Any Property" ng-model="search.$" />
<input type="text" name="searchTag" placeholder="Filter by Tag" ng-model="search.tag" />

<div ng-repeat="post in threePosts | filter : search ">

The difference between this answer and @alphapilgrim is that you don't have to create your own logic to handle the filtering. Angular provides a base filter that works well in many, if not most situations.

Here are the docs if you would like to learn more about it. It is pretty powerful if you dig deep. https://docs.angularjs.org/api/ng/filter/filter

edited Apr 6, 2017 at 15:26

answered Apr 6, 2017 at 15:19

Matt

87910 silver badges29 bronze badges

1 Comment

Lapsio Over a year ago

Thanks! i will try it as well :) Have great day.

Collectives™ on Stack Overflow

How to filter json using angular filter

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related