JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

angular.module('article', [])
.controller('ArticleController', ['$scope', function($scope) {
var articles = [{
    "id": "66D5069C-DC67-46FC-8A51-1F15A94216D4",
        "articletitle": "artilce1",
        "articlecategoryid": 2,
        "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. "
}];

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

}]);