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

Inquiry from a newcomer: ASP.NET with jQuery

Determining the dimensions of a directive element after opening a modal in AngularJS with ui-bootstrap

Ajax Complete adds Jquery two times in a row

Passing a JSON object as a parameter in a dynamically created element's click event using JavaScript/AngularJS

Transform a PHP array into a JavaScript array with UTF-8 encoding

How to effectively handle asynchronous calls in Node.js using readdir and stat functions

Overlap of columns within a nested flexbox arrangement

Persisting a single module using vuex-persistedstate

Checking connectivity in an Ionic application

clearInterval function is not functioning

Steps for saving data to a JSON file in a React application

Learning to dynamically access files from various folders and subfolders within webpack using JavaScript

The object persists in revealing the password that I am attempting to conceal

I am getting text content before the input element when I log the parent node. What is causing this issue with the childNodes

My element is not being animated by Elementbyclass

Trigger a notification based on the selected choice

Displaying a custom error page in Next.js with the appropriate status code

JavaScript: Trouble with statement execution

How to direct all wildcard paths to a particular route in Next.js

A JavaScript pop-up box with two windows