How can I efficiently extract specific data from JSON using AngularJs?

Question

How can I efficiently extract specific data from JSON using AngularJs?

In my array (_users), there are 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- I am looking to filter only users with "active":"1" instead of "0".

The attempted solution was:

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

However, this approach did not work as expected for me. Any help or suggestions would be greatly appreciated. Thank you!

javascript json frameworks angularjs

Answer 1

Answer №1

If your object model is intricate, I suggest utilizing a personalized filtering function:

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

Then, in your HTML:

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

You can see the solution in action on this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/4kzzy/3/

Don't forget to refer to angular's documentation for more information on filters: http://docs.angularjs.org/api/ng.filter:filter

Answer 2

If your object model is intricate, I suggest utilizing a personalized filtering function:

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

Then, in your HTML:

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

You can see the solution in action on this jsFiddle: http://jsfiddle.net/pkozlowski_opensource/4kzzy/3/

Don't forget to refer to angular's documentation for more information on filters: http://docs.angularjs.org/api/ng.filter:filter

Answer 3

Answer №2

Expanding on the ideas presented by @pkozlowski.opensource to include real-time filtering of items and users:

Explore live filtering here

<div ng-controller="MyCtrl">
  <label>Filter users by substring of userid:</label>
  <input ng-model="zzzzz">

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

Additionally, add this function to your controller:

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

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

Answer 4

Expanding on the ideas presented by @pkozlowski.opensource to include real-time filtering of items and users:

Explore live filtering here

<div ng-controller="MyCtrl">
  <label>Filter users by substring of userid:</label>
  <input ng-model="zzzzz">

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

Additionally, add this function to your controller:

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

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

How can I efficiently extract specific data from JSON using AngularJs?

Answer №1

Answer №2

Similar questions

AngularJS - Regular Expression Error

Issues with Javascript functionality on aspdotnetstorefront site

The error message "TypeError: res.response is undefined" is indicating

Continuously iterate through collection as it expands over time

Transferring data from a table to another window

Moving an array in AngularJS from one file to another

What is the best way to connect tags with their corresponding tag synonyms?

How can AngularJS display ellipses using the limitTo filter exclusively for strings that surpass the character limit?

Utilizing React Typescript to Efficiently Manage Multiple Checkboxes within a List

The Redis port and host remain unset despite having defined environment variables

Using JavaScript to place a particular tag at a designated position

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

Accessing a form by inputting a personal identification number

The deprecated body parser is throwing an error due to the lack of the extended option

Having trouble utilizing props with Vue axios? Running into an undefined error? Unsure how to properly use props with axios?

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Create a key for QJsonObject using the current timestamp

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

retrieving JSON data using ajax and processing it in PHP

Animating the smooth collapse of panels within listviews