-1

enter image description hereI have the values I need in an array after reducing them from another array but can't seem to figure out how to work with them in an ng-repeat? 

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 }],
count = data.reduce(function (r, a) {
    r[a.Category] = r[a.Category] || {};
    r[a.Category][a.SubCategory] = (r[a.Category][a.SubCategory] || 0) + 1;
    return r;
}, {});

  document.write('<pre>' + JSON.stringify(count, 0, 4) + '</pre>');

   Example: 
  <div ng-controller="controller as vm">
  <ul ng-repeat="t in vm.array">
  <li>{{t.data}}</li>
  </ul>
  </div>

  angular.module("app").controller("controller", function(){  
     var main = this;

       main.getCategoriesCount = function () {
                var data = main.openTickets;

     var count = data.reduce(function (r, a) {
          r[a.Category] = r[a.Category] || {};
          r[a.Category][a.SubCategory] = (r[a.Category][a.SubCategory] || 0)      + 1;
          return r;
      }, {});
                 main.array = count;
            }

       }
Rethabile
  • 325
  • 3
  • 22
  • Assign them to a `$scope` variable - and use `ngRepeat` on that in the view, not `document.write` – tymeJV Jan 12 '16 at 13:06
  • Thank you for the suggestion.I included the document.write so that you can see the data that is outputting. I tried what you said but once I write ng-repeat= "t in array" I don't have anything to access the data inside the array with the t. [{Application: Object}, {Database Installation: Object}] – Rethabile Jan 12 '16 at 13:09
  • How are you assigning the data to `t`? - Could you post your controller definition above as well – tymeJV Jan 12 '16 at 13:10
  • What shows on the page.. unparsed `{{t.data}}` or an empty list? – tymeJV Jan 12 '16 at 13:27
  • the .data was just a filler. If I had [{name: "Susan", lastName: "Kite"}] I would do t.name. With the data I am getting back I have [{Susan: {Kite: 21}}] – Rethabile Jan 12 '16 at 13:33
  • So you can see the data in the view, it's just not formatted how you want it? – tymeJV Jan 12 '16 at 13:39
  • Right, now its just setup as {{t}} which show the whole object in the view – Rethabile Jan 12 '16 at 13:42
  • @tymejv https://jsfiddle.net/bg9aqgex/ – Rethabile Jan 12 '16 at 14:14
  • I would like the fiddle to say Hardware 2 and toggle Phone 1 – Rethabile Jan 12 '16 at 14:16

1 Answers1

0

For repeating the elements of an object (as opposed to an array), use:

<ul ng-repeat="(key, value) in object">

It turns out that in both this and your other related question you have an "XY problem". You have chosen a particular data structure that you think can represent your data, but it's actually not the right one for the job, because it's not practical to store the counts for the top level category as a property, and at the same time store the children as properties too.

Instead, I recommend a more "nested" approach:

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

This will give each entry an explicit count property and then a separate children property, the keys of which are the sub-category's names.

You can then use two nested ng-repeat directives:

<ul>
  <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>

See https://jsfiddle.net/alnitak/ezn48htm/

Community
  • 1
  • 1
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • @Rethabile well, we can't tell for sure what output you actually want, and I'd be slightly concerned about the doubly-nested object, since that indicates that you need _another_ `ng-repeat="(key2, value2)"` inside the first. – Alnitak Jan 12 '16 at 13:47
  • Thank you for the example. "name" and "kite" are not properties I have: [{Susan: {Kite: 21}}, {Mike: {John: 25}}, {John:{Snow: 23}},{Wilson:{Johnson: 28}}] – Rethabile Jan 12 '16 at 13:51
  • @Rethabile I don't know where those came from, perhaps someone else's comment? – Alnitak Jan 12 '16 at 14:10
  • @Rethabile and? You appear to be calculating the number of times that each category and subcategory appear. The code in your fiddle only counts the top level category, and isn't the same as this question. – Alnitak Jan 12 '16 at 14:16
  • I get the count of all subcategories for a Category and then I get the count of SubCategories by them selves. I cant display the data I am getting back. – Rethabile Jan 12 '16 at 14:19
  • Ill add the document write again so that you can see the data – Rethabile Jan 12 '16 at 14:19
  • No, don't - I've seen the data, it's just that your code and your fiddle are not consistent. Take a look at my own fiddle to see correct usage for `ng-repeat` with an object. – Alnitak Jan 12 '16 at 14:20
  • @alnitak if you add: document.write('
    ' + JSON.stringify(count, 0, 4) + '
    '); under $scope.array you can see the data that is returned     – Rethabile Jan 12 '16 at 14:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100484/discussion-between-rethabile-and-alnitak). – Rethabile Jan 12 '16 at 14:22
  • The black boxes should list the categories and its count and when you click on the black box it should show the subcategories and its count – Rethabile Jan 12 '16 at 14:26
  • yes, well unfortunately you omitted *any* detail about how the data maps to the desired HTML from your question... In any event, you'll need two separate objects for that - it'll confuse things if you both include counts *and* subcategories in the same object. – Alnitak Jan 12 '16 at 14:27
  • @Rethabile ultimately you have the wrong data structure - you would be better with an array of `[ { name: , count: n, children: [ ... ] }]` where `children` is a nested array of the same structure. That however is an entirely separate question from the one you asked. – Alnitak Jan 12 '16 at 14:38
  • @alnitak http://stackoverflow.com/questions/34731682/i-have-an-array-of-100-objects-with-properties-of-category-and-subcategory-and-n – Rethabile Jan 12 '16 at 14:40
  • 1
    Ah, an "XY Problem". You have chosen a data structure to represent the counts, and asked how to produce that. Unfortunately, it's the wrong data structure for producing the desired output. – Alnitak Jan 12 '16 at 14:48
  • @alnitak Stackoverflow suggest not leaving thank you commits but until they find another way or until I have enough points to add to others this is my option. Thank you so much for taking the time to help. With the combined answers it solved the goal I was trying to reach. – Rethabile Jan 12 '16 at 15:54
  • @Rethabile you're welcome, and hopefully you also learned something about how to figure out what your actual problem is, not the one you think you have ;) – Alnitak Jan 12 '16 at 15:56
  • @Rethabile To answer your question "Is the above right?" No, it isn't but it seems your question is answered now. I am totally lost in this conversation. Next time please isolate your problem in a simple example, show what you tried and tell what you try to solve. – Frank van Wijk Jan 13 '16 at 16:50
  • @FrankvanWijk ultimately 1. the OP's data structure was a poor choice for the task at hand 2. he needed nested `ng-repeat` directives, 3. he was also using the wrong syntax for `ng-repeat` for objects – Alnitak Jan 13 '16 at 16:53