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! :)

Answer 1

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>

Answer 2

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

Answer 3

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