How to filter JSON-Data with AngularJs?

Question

I have an array (_users) that contains JSON objects.

{ 
  "User":
  {
    "userid":"19571",
    "status":"7",
    "active":"1",
    "lastlogin":"1339759025307",
    "Stats":
     [
       {
         "active":"1",
         "catid":"10918",
         "typeid":"71",
         "Credits":
         [
           {
             "content":"917,65",
             "active":"1",
             "type":"C7"
           },               
           {
             "content":"125,65",
             "active":"1",
             "type":"B2"
           }
         ]
       }
     ]
  }
}

1- How can I filter only users with "active":"1" not "0"

I have tried something like this:

<div ng-repeat="user in _users | filter:active | orderBy:user.userid">
    {{user.userid}}
</div>

but not working correctly for me.

Thank you!

pkozlowski.opensource · Accepted Answer · 2012-08-12 15:15:12Z

39

Since your object model is kind of complex I would recommend using custom filtering function:

$scope.isActive = function(user) {
    return user.User.Stats[0].active === "1";
};

and then in your HTML:

<div ng-repeat="user in _users | filter:isActive">
    {{user.User.userid}}
</div>

Here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/4kzzy/3/

Be sure to check angular's documentation on filters if you need more info: http://docs.angularjs.org/api/ng.filter:filter

answered Aug 12, 2012 at 15:15

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

1 Comment

GFoley83 Over a year ago

Answer above is perfect but FYI, if you want to filter your array before binding to scope, you can also use jQuery.grep() or the _filter from underscore.js jsfiddle.net/NRuM7/1 - jQuery.Grep() documentcloud.github.com/underscore/#filter - underscore.js

okigan · Accepted Answer · 2014-03-18 21:33:46Z

4

Taking @pkozlowski.opensource a bit further and allowing live filtering of items/users:

http://jsfiddle.net/hbyNN/

<div ng-controller="MyCtrl">
  <label>userid substring filter:</label>
  <input ng-model="zzzzz">

  <div ng-repeat="user in _users | filter:isInteresting"> 
      <pre>{{user | json}}</pre>
  </div>
</div>

And:

   $scope.isInteresting = function (user) {
    if ($scope.zzzzz == undefined) {
        return true;
    }

    return user.userid.indexOf($scope.zzzzz) !== -1;
};

answered Mar 18, 2014 at 21:33

okigan

1,6492 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to filter JSON-Data with AngularJs?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related