Count the number of items in a JSON array in AngularJS with a specific ID

Question

Count the number of items in a JSON array in AngularJS with a specific ID

To get the total count of articles in a JSON array, I use the following method:

Home.html

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

Controllers.js

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

}]);

Services.js

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

Now, in addition to displaying the overall count, I also want to show the number of articles by category. Here is an example data set:

[
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D4",
"articletitle": "article1",
"articlecategoryid": 1,
"articlesummary": "article 1 summary. "
 },
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D5",
"articletitle": "article2",
"articlecategoryid": 2,
"articlesummary": "article 2 summary. "
}, 
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D6",
"articletitle": "article3",
"articlecategoryid": 3,
"articlesummary": "article 3 summary. "
},   
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D7",
"articletitle": "article4",
"articlecategoryid": 1,
"articlesummary": "article 3 summary. "
}, 
]

In this scenario, the total count is 4, with 2 articles in Category 1. To display this information on a page, it should look like this:

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

Total Articles (4)

How can I count the number of articles per category?

javascript json angularjs

Answer 1

Answer №1

To create an object with the cat ID as the name and the count as the value, one could utilize the reduce method:

$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;
}, {});

This can be accessed through your scope and displayed using ng-repeat

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

Here is a live example on jsfiddle

Answer 2

To create an object with the cat ID as the name and the count as the value, one could utilize the reduce method:

$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;
}, {});

This can be accessed through your scope and displayed using ng-repeat

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

Here is a live example on jsfiddle

Answer 3

Answer №2

To begin, organize the elements in the array var data = [ ]; based on a specific criterion.

data.sort(customSort);

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

Next, identify and count any duplicate values in the array.

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

For a practical example, refer to the demonstration provided here.

Answer 4

To begin, organize the elements in the array var data = [ ]; based on a specific criterion.

data.sort(customSort);

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

Next, identify and count any duplicate values in the array.

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

For a practical example, refer to the demonstration provided here.

Count the number of items in a JSON array in AngularJS with a specific ID

Answer №1

Answer №2

Similar questions

What is the best way to execute a function before showing an alert in a $.post() callback?

Next.js is experiencing issues with the build process

Utilizing a search feature to navigate through JSON data in a Ruby on Rails

Uncover the hidden treasures within an array of objects using Postman

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

Leveraging oEmbed - JSON data (within client-side JavaScript)

Guide on how to toggle disabled input text box upon checking checkbox using JavaScript

Getting the user's name and country using `auth().createUserWithEmailAndPassword` is a simple process

Why is the image popup feature not functioning properly? What could be causing the issue?

Tips for incorporating the camera from fbxloader into your three.js scene

Unraveling the Mysteries of Node.js Application Logging

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Using CoffeeScript with Visual Studio 2012

Duplicate the image from a specific div to another div, ensuring that only one clone is created

Unlocking the contents of an array from a separate file in Next.js

Accessing the jQuery Ajax success variable

Callbacks and scope in MySQL操作callbacks and scopeMySQLcallbacks

Passing arguments to an external function in jQuery from a dynamically loaded Ajax page

Encountering an issue of receiving "Undefined" while attempting to access constant data from a ReactJS file within my NodeJS

Pagination activates on the second tap