Угловой: отображение на основе разных категорий

Question

В угловых:

У меня есть объект JSON ниже:

$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'}
            ];

Вы можете видеть, как у той же кошки, скажем, кошка-А повторяется более двух раз на объекте, или у некоторых кошек повторяется только дважды или даже меньше.

Я хотел посмотреть, сможем ли мы на основе объекта Cat сверху, разобрать их в один массив, как показано ниже, а также удалить дубликаты из сгенерированного списка:

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

И отобразить их ниже:

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

Также, если возможно, отобразите свойства каждого индивидуума под ними.

Answer 1

Наиболее многоразовым решением, возможно, будет создание нового углового фильтра. (https://docs.angularjs.org/api/ng/filter/filter)

В фильтре вы можете сделать что-то вроде следующего:

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;
    }, []);
}

Если у вас есть это, вы можете использовать его в каждом ng-repeat.

Answer 2

Попробуйте что-то вроде этого, чтобы восстановить ваши данные:

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;

Это даст вам объект с каждой категорией в качестве ключа, с данными в массиве.

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