Группировка элементов массива javascript на основе их свойств с AngularJS

Question

Представьте себе, что у вас есть список вин:

[  
   {  
      "name":"wine A",
      "category":[  
         "red",
         "merlot"
      ]
   },
   {  
      "name":"wine B",
      "category":[  
         "white",
         "chardonnay"
      ]
   },
   {  
      "name":"wine C",
      "category":[  
         "white",
         "chardonnay",
         "red",
         "merlot"
      ]
   }
]

Мне нужно создать механизм фильтрации / группировки с AngularJS, чтобы, если пользователь выберет «Шардоне», результат будет:

Results: wine B, wine C

У меня есть рабочий пример, но, пожалуйста, проверьте данные структуры этого примера.Массивы внутри объектов не определены.Что я должен настроить в контроллере, чтобы он был совместим с вышеуказанной структурой (массивом)?

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.wines = [
    {
      name: "Wine A",
      category: "red"
    },
    {
      name: "Wine B",
      category: "red"
    },
    {
      name: "wine C",
      category: "white"
    },
    {
      name: "Wine D",
      category: "red"
    },
    {
      name: "Wine E",
      category: "red"
    },
    {
      name: "wine F",
      category: "white"
    },
    {
      name: "wine G",
      category: "champagne"
    },
    {
      name: "wine H",
      category: "champagne"
    }
  ];
  $scope.filter = {};

  $scope.getOptionsFor = function(propName) {
    return ($scope.wines || [])
      .map(function(w) {
        return w[propName];
      })
      .filter(function(w, idx, arr) {
        return arr.indexOf(w) === idx;
      });
  };

  $scope.filterByProperties = function(wine) {
    // Use this snippet for matching with AND
    var matchesAND = true;
    for (var prop in $scope.filter) {
      if (noSubFilter($scope.filter[prop])) continue;
      if (!$scope.filter[prop][wine[prop]]) {
        matchesAND = false;
        break;
      }
    }
    return matchesAND;
    /**/
    /*
            // Use this snippet for matching with OR
            var matchesOR = true;
            for (var prop in $scope.filter) {
                if (noSubFilter($scope.filter[prop])) continue;
                if (!$scope.filter[prop][wine[prop]]) {
                    matchesOR = false;
                } else {
                    matchesOR = true;
                    break;
                }
            }
            return matchesOR;
    /**/
  };

  function noSubFilter(subFilterObj) {
    for (var key in subFilterObj) {
      if (subFilterObj[key]) return false;
    }
    return true;
  }
});

app.filter("capitalizeFirst", function() {
  return function(str) {
    str = str || "";
    return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="(prop, ignoredValue) in wines[0]" ng-init="filter[prop]={}">
      <b>{{prop | capitalizeFirst}}:</b>
      <br />
      <span class="quarter" ng-repeat="opt in getOptionsFor(prop)">
        <input type="checkbox" ng-model="filter[prop][opt]" />&nbsp;{{opt}}
      </span>
      <hr>
    </div>
    <div ng-repeat="w in filtered=(wines | filter:filterByProperties)">
      {{w.name}} ({{w.category}})
    </div>
    <hr> Number of results: {{filtered.length}}
  </div>
</div>

Answer 1

При переходе от списка к массиву вы должны изменить способ получения опций и добавить вызов flat ()

  $scope.getOptionsFor = function(propName) {
    return ($scope.wines || [])
      .map(function(w) {
        return w[propName];
      })
      .flat()
      .filter(function(w, idx, arr) {
        return arr.indexOf(w) === idx;
      });
  };

Тогда filterByProperty должен иметь возможность обрабатывать как массивы, так и простые значения:

  $scope.filterByProperties = function(wine) {
    // Use this snippet for matching with AND
    var matchesAND = true;
    for (var prop in $scope.filter) {
      if (noSubFilter($scope.filter[prop])) 
        continue;

      if(Array.isArray(wine[prop])) {
          let matchCount = 0;  
          for(let i in wine[prop]) {
            if ($scope.filter[prop][wine[prop][i]]) {
              ++matchCount;
            }
          }
          let trueFilter = 0
          Object.values($scope.filter[prop]).forEach(element => {
              if (element)
                ++trueFilter
          });
          matchesAND = matchCount == trueFilter;
          if (! matchesAND)
            break
      }
      else {
      if (!$scope.filter[prop][wine[prop]]) {
        matchesAND = false;
        break;
      }}
    }
    return matchesAND;
  };

Answer 2

Просто используйте search фильтр:

 <b>Pick your category: (Hard coding)</b>
            <ul>
              <li style="cursor:pointer" ng-click="click_filter('red')">red</li>
              <li style="cursor:pointer" ng-click="click_filter('merlot')">merlot</li>
              <li style="cursor:pointer" ng-click="click_filter('white')">white</li>
              <li style="cursor:pointer" ng-click="click_filter('chardonnay')">chardonnay</li>
            </ul>

    <b>Result</b>
          <div ng-repeat="wine in wines | filter:search ">
          <b>{{wine.name}}</b> - (category): {{wine.category}}
          </div>
    </div>

JS:

 $scope.click_filter = function(item) {
         $scope.search = item;
     }

Что еще нужно сделать (если вы не хотите, чтобы категории были жестко закодированы) -Посмотрите, как удалить повторяющиеся записи из ng-repeat (в моем примере с plunker эта проблема существует)

plunker: http://next.plnkr.co/edit/POW2i0rkQhpcvZYh?preview