Clever Geek Handbook

How to filter json using angular filter

Hi i have little problem with angular filter. I am importing a post from Wordpress and I would really like to filter them by tags, for example, now only show the post with the = ENG tag or only show the post with the = GER tag. 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 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 to make a filter in the controller, but I can only do it for one element, for example:

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

Any guys ideas? Have a nice day!:)

+3


source to share


3 answers


Made a quick filtering, can change it according 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 want to do it in a template it will 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>
+4


source


I think you need a function Array.filter

combined withArray.some 



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


source


Here's another approach using a 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's is that you don't need to create your own logic to handle the filtering. Angular provides a basic filter that works well in many situations, if not most.

Here are the docs if you want to know more about it. This is very effective if you dig deep. https://docs.angularjs.org/api/ng/filter/filter

+1


source






More articles:


All Articles