AngularJS count number of items in JSON array where ID equals

Question

I can get the overall count of a number of articles in a JSON array using the following:

Home.html

<div ng-controller="pfcArticleCountCtrl">Number of Articles {{articlecount.length}} items</div>

Controllers.js

// Count number of total articles
pfcControllers.controller('pfcArticleCountCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) {
$scope.articlecount = pfcArticles.query();

}]);

Services.js

// Articles by ID
pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
    return $resource('https://myrestcall.net/tables/articles/:articleID', { articleID: '@id' },
    {
        'update': { method:'PATCH'}
    }
    );
}]);

But I would also like to display the number of articles by category. Here is an example JSON return:

[
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D4",
"articletitle": "artilce1",
"articlecategoryid": 1,
"articlesummary": "article 1 summary. "
 },
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D5",
"articletitle": "artilce2",
"articlecategoryid": 2,
"articlesummary": "article 2 summary. "
}, 
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D6",
"articletitle": "artilce3",
"articlecategoryid": 3,
"articlesummary": "article 3 summary. "
},   
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D7",
"articletitle": "artilce4",
"articlecategoryid": 1,
"articlesummary": "article 3 summary. "
}, 
]

In this instance the overall count is 4, but for Category 1, it should be 2. I want to display this on a page as follows:

Category 1 (2) Category 2 (1) Category 3 (1)

Total Articles (4)

How do I count the number of articles by category?

that is not Angular case. You need to loop through your result to count all cateories. Only after that go with angulars view model — paka
– paka, Commented Jan 8, 2015 at 20:07

Julien Roy · Accepted Answer · 2015-09-05 13:45:00Z

2

You could use reduce to create an object with cat id as name and count as value :

$scope.articleByCat = articles.reduce(function (prev, item) {

    if ( !! prev[item.articlecategoryid]) {
        //category already exist -> increment
        prev[item.articlecategoryid]++;
    } else {
        //category does not exist -> init
        prev[item.articlecategoryid] = 1;
    }
    return prev;
}, {});

You expose it by your scope and display it via ng-repat

<div ng-app='article' ng-controller='ArticleController'>
 <ul>
     <li ng-repeat='(key, value) in articleByCat'>Category {{key}} : {{value}}</li>
    </ul>
 </div>

A working jsfiddle

answered Sep 5, 2015 at 13:45

Julien Roy

3093 silver badges11 bronze badges

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

Comments

vamsikrishnamannem · Accepted Answer · 2015-01-08 21:21:30Z

0

First sort the array var data = [ ];(your data)

data.sort(sort);

function sort(a,b) {
  if (a.articlecategoryid < b.articlecategoryid)
     return -1;
  if (a.articlecategoryid > b.articlecategoryid)
    return 1;
  return 0;
  }

Then count the duplicate values

var current = null;
    var cnt = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i].articlecategoryid != current) {
            if (cnt > 0) {
                document.write('Category'+current+'-->'+cnt+ ' times<br>');
            }
            current = data[i].articlecategoryid;
            cnt = 1;
        } else {
            cnt++;
        }
    }
    if (cnt > 0) {
        document.write('Category'+current+'-->'+cnt+ ' times');
    }

see the example in here

answered Jan 8, 2015 at 21:21

vamsikrishnamannem

4,8455 gold badges27 silver badges34 bronze badges

1 Comment

Kode Over a year ago

How is it best suited for output in Angular? Ex. $scope.count = document.write('Category'+current+'-->'+cnt+ 'times');

Collectives™ on Stack Overflow

AngularJS count number of items in JSON array where ID equals

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related