CODEWITHSUNDEEP
javascriptangularjsjsonwordpress
Lapsio
Lapsio

Reputation: 71

How to filter json using angular filter

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

Upvotes: 3

Views: 597

Answers (3)

Matt
Matt

Reputation: 879

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

Upvotes: 1

alphapilgrim
alphapilgrim

Reputation: 3975

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>

Upvotes: 4

Mtihc
Mtihc

Reputation: 221

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

Upvotes: 1

Related Questions