Angular: Display based on different categories

Question

In Angular:

I have the below JSON object:

$scope.catItems = [
                {cat: 'A', desc: 'lorem ipsum', tags: '', name: 'abc', link: 'www.google.com'},
                {cat: 'B', desc: 'I am here too', tags: '', name: 'def', link: 'www.google.com'},
                {cat: 'C', desc: 'So am I', tags: '', name: 'ghi', link: 'www.google.com'},
                {cat: 'D', desc: 'Where is the sky', tags: '', name: 'jkl', link: 'www.google.com'},
                {cat: 'A', desc: 'I really don't know', tags: '', name: 'mno', link: 'www.google.com'},
                {cat: 'A', desc: 'So do I', tags: '', name: 'pqr', link: 'www.google.com'},
                {cat: 'C', desc: 'Tell the next person', tags: '', name: 'stu', link: 'www.google.com'},
                {cat: 'B', desc: 'So will I', tags: '', name: 'vwx', link: 'www.google.com'}
            ];

You can see how same cat's like lets say cat-A is repeated more than twice in the object or some cat's are only repeated twice or even less.

I wanted to see if we can based on Cat from above object, parse them into one array like below and also remove duplicates from the list generated:

$scopt.cats = [];
for (items in $scope.catItems){
  if ($scope.cats.indexOf(item.cat) < 0){
    $scope.cats.push(item.cat);
  }
}

And display them in the below:

<ul data-ng-repeat="items in cats">
    <li>
       <p class="search-title">{{items}}</p>
    </li>
</ul>

Also, if possible display each individuals properties below them.

Did you look at this post: https://stackoverflow.com/questions/17793751/how-to-filter-by-object-property-in-angularjs?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Stradosphere, Apr 27 '18 at 16:33
@Stradosphere, Idea there is closer to what I am looking, but my need is to store the cats in one array and then once the cats are stored. Their respective properties need to be displayed under them. Like, Cat - A is repeated thrice so the output of it would be (Cat - A ---- name : abc name : mno name: pqr) — Bob, Apr 27 '18 at 16:55

Stradosphere · Answer 1 · 2018-04-27T17:42:58.293

Try something like this to rebuild your data:

var list = {};
for (item in catItems){
    if (!list[catItems[item].cat]){
      list[catItems[item].cat] = [];
      list[catItems[item].cat].push(catItems[item]);
    } else{
      list[catItems[item].cat].push(catItems[item]);
    }
}

$scope.cats = list;

This will give you an object with each category as the key, with the data in an array.

<ul data-ng-repeat="(key, value) in cats">
    <li>
       <p class="search-title">{{key}}</p>
       <ul data-ng-repeat="item in value">
           <li>
               <p class="search-title">{{item}}</p>
           </li>
       </ul>
    </li>
</ul>

score 1 · Accepted Answer · answered Apr 27 '18 at 17:41

The most reusable solution, may be to make a new angular filter. (https://docs.angularjs.org/api/ng/filter/filter)

In the filter you could do something like the following:

function removeDuplicates(array, uniqProperty) {
    var uniq = [];
    return array.reduce(function(accumulator, item) {
         var prop = item[uniqProperty];
         var isUniqueItem = uniq.indexOf(prop)
         if (isUniqueItem) {
             uniq.push(prop);
             accumulator.push(item);
         }
         return accumulator;
    }, []);
}

Once you have this you can use it in every ng-repeat.

Angular: Display based on different categories

2 Answers2