JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<div ng-app="app">
  <ul ng-controller="controller">
    <li ng-repeat="(cat, info1) in counts"> {{cat}} {{info1.count}}
      <ul>
        <li ng-repeat="(sub, info2) in info1.children">
          {{sub}} {{info2.count}}
        </li>
      </ul>
    </li>
  </ul>
</div>

JavaScript

var data = [{
  ticketId: 1,
  Category: "Driver",
  CategoryID: 29,
  SubCategory: "Monitor",
  SubCategoryID: 31
}, {
  ticketId: 2,
  Category: "Driver",
  CategoryID: 29,
  SubCategory: "Monitor",
  SubCategoryID: 31
}, {
  ticketId: 3,
  Category: "Hardware",
  CategoryID: 11,
  SubCategory: "Monitor",
  SubCategoryID: 32
}, {
  ticketId: 4,
  Category: "Hardware",
  CategoryID: 11,
  SubCategory: "phone",
  SubCategoryID: 13
}];

var app = angular.module("app", []);

app.controller("controller", function($scope) {
  $scope.counts = data.reduce(function(r, o) {
    var cat = o.Category;
    var sub = o.SubCategory;

    r[cat] = r[cat] || {
      count: 0,
      children: {}
    }
    r[cat].count++;

    r[cat].children[sub] = r[cat].children[sub] || {
      count: 0
    }
    r[cat].children[sub].count++;
    return r;
  }, {});
  
  console.log($scope.counts)
});