Filter result based on IS AngularJS

Question

I have data from the JSON file. I am showing list of categories but I want to filter the list and show only category with 'parent:0'.

"categories": [
            {
                "id": 51,
                "slug": "knarr",
                "title": "Knarr",
                "description": "",
                "parent": 8,
                "post_count": 2
            },
            {
                "id": 15,
                "slug": "service-vessels",
                "title": "Service Vessels",
                "description": "",
                "parent": 0,
                "post_count": 1
            }
        ],

Please check my code here "http://plnkr.co/edit/1vcIAPSwvxQcbIzMhyzp?p=preview"

Answer 1

Angular's filter provider already has the ability to filter a list (like in ng-repeat) by property. In the HTML, this would be like the following:

<ul ng-repeat="category in categories | filter:{parent: 0}">
------------------------------ HERE --^

DEMO: http://plnkr.co/edit/HXvkmar7I7HpgPbv6LVM?p=preview

Unfortunately, the default matching used is partial. That means, if the parent property contains "0". So for example, any of the items that have parent: 10 would match as well, as the plunker shows (string comparisons are done on the property values).

Luckily, you can provide true in the filter expression and it will do an exact match. That means using this:

<ul ng-repeat="category in categories | filter:{parent: 0}:true">
-------------------------------------------------- HERE --^

DEMO: http://plnkr.co/edit/m22ML9XPf2FnZweuModU?p=preview

---

Also, just as a suggestion, it seems weird to put an ng-repeat on a <ul> element - I would expect it to be on the <li> element.

---

Looking at the comments in the other answers, you were also looking to only display unique categories. Since your JSON implies that categories have unique ids, you can create a custom filter for your app like this:

app.filter("uniqueCategoryFilter", function () {
  return function (categories) {
    var uniqueCategories, catIds;
    uniqueCategories = [];
    catIds = {};
    if (categories) {
      angular.forEach(categories, function (category) {
        if (!catIds[category.id]) {
          catIds[category.id] = true;
          uniqueCategories.push(category);
        }
      });
    }
    return uniqueCategories;
  };
});

And use it like this:

<ul ng-repeat="category in categories | filter:{parent: 0}:true | uniqueCategoryFilter">
-------------------------------------------------------- HERE --^

DEMO: http://plnkr.co/edit/3NHuTvQiVHQTZxtIkEGB?p=preview

Make sure this unique filter comes after the parent property filter.

---

References:

• AngularJS API filter: https://docs.angularjs.org/api/ng/filter/filter

Answer 2

You can filter wanted categories:

$scope.categories = $scope.categories.filter(function(category) {
  return category.parent === 0;
});

http://plnkr.co/edit/hHe2AS2gzm35mEqnHoQ3?p=preview

Answer 3

You can make your own filter in angular, you can try something like this:

  <div ng-controller="ListCtrl">
      <ul ng-repeat="category in categories | customFilter:category">
          <li>{{category.title}}</li>
      </ul>
  </div>

and the filter:

app.filter('customFilter', [function () {
    return function (items) {
        var filtered = [];

        angular.forEach(items, function (item) {

          if(item.parent === 0 && indexOf(item) < 0) {
            filtered.push(item);
          }
        })

        return filtered;
    }
}]);

See the updated plunker: http://plnkr.co/edit/96aX0cqLT9SJX2YZquns?p=preview

For more information about filters checkout the docs