AngularJS get length of specific item in JSON array

Question

Hey I have a JSON array that I'm calling from a service. I have some counters that I'd like to print out the length of the total array and length of some sub items. I'm able to print out the full length of the array but I also would like to print out the total number of items that have a progress "green", "red", and "yellow". Seeing that it's an array of objects, how would I go about to get the length of green, red, yellow?

JSON:

[
   {
     name: User1,
     progress: "green"
   },
   {
     name: User2,
     progress: "yellow"
   },
   {
     name: User3,
     progress: "green"
   },
    {
     name: User4,
     progress: "red"
   },
]

I'm storing the service called as so:

$scope.requestDetails = [];
$scope.requestDetails = data;

HTML:

<div class="total">{{requestDetails.length}}</div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>

Out of curiosity, I tried to print {{requestDetails.progress.length}} but it comes up empty and printing {{requestDetails[0].progress.length}} prints out the number of letters of the first object's progress value.

Look at using array filter method, which you can use to create a new array with only the progress values you want, then ask for the length of that. developer.mozilla.org/en/docs/Web/JavaScript/Reference/… — azium
– azium, Commented Sep 7, 2015 at 16:56

Oleg Belousov · Accepted Answer · 2015-09-07 17:23:35Z

4

Use the angular built in filter:

{{requestDetails.lenght}}

{{(requestDetails | filter: {progress: 'red'}).length}}

You can also use a custom function on the controller for custom logic:

Controller code:

  $scope.colorFilter = function(color) {
    return function (obj) {
      return obj.progress === color;
    };
  };

{{(requestDetails | filter: colorFilter('red')).length}}

Note: since Angular 1.3 filters must declare their dependencies explicitly to create a $watcher on them, otherwise those parameters will not be dirty checked within the $digest cycle, and the output will not be affected by any 2-way bindings.

Plunker: http://plnkr.co/edit/zgzSqeMVnCQbpDitrSI3?p=preview

edited Sep 7, 2015 at 17:23

answered Sep 7, 2015 at 17:03

Oleg Belousov

10.1k14 gold badges74 silver badges128 bronze badges

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

4 Comments

Anish S. Over a year ago

Nice! but this unfortunately spits out the 10 $digest() iterations reached...i'm still digging into it

Oleg Belousov Over a year ago

if you can elaborate on how this array is populated and \ or changed, perhaps I can offer some further assistance

Anish S. Over a year ago

Of course! I'm looping thru this array using ng-repeat on a table element...I have 3 counters on top of the table that would display the # of total, green,red,and yellow records...I think using this filter coupled with the ng-repeat spits out the digest error

Anish S. Over a year ago

Hey Oleg, it's fixed now! in my controller where I was calling my service and storing the aforementioned data, I had two instances of the same "GET" call to get my data...I removed the duplicate and works like a charm...thank you

aghidini · Accepted Answer · 2015-09-07 16:58:35Z

0

You can prepare your data in the controller, counting every element:

$scope.itemData = {};
for (var i = 0; i < $scope.requestDetails.length; ++i) {
  var detail = $scope.requestDetails[i];
  if ($scope.itemData[detail.progress] === undefined) {
    $scope.itemData[detail.progress] = 0;
  }
  $scope.itemData[detail.progress]++;
}

and use it in your template:

<div class="red">{{ itemData.red }}</div>
<div class="green">{{ itemData.green }}</div>

answered Sep 7, 2015 at 16:58

aghidini

3,0495 gold badges31 silver badges37 bronze badges

Comments

MLBCodes · Accepted Answer · 2015-09-07 17:10:57Z

0

If I am understanding the question correctly, the goal is to display counts of each progress type from the object?

If this is the case, here is one possible solution.

HTML

<div>{{requestDetails.length}}</div>
<div class="red">{{(requestDetails | filter: {progress: 'red'}).length}}</div>
<div class="green">{{(requestDetails | filter: {progress: 'green'}).length}}</div>

This method leverages the built in angular filter. For more reading on filters and angularjs, here are the docs.

answered Sep 7, 2015 at 17:10

MLBCodes

1961 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS get length of specific item in JSON array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related