Ng-повторный список с количеством повторений множества значений элемента

Question

Мне нужно составить таблицу, в которой указано имя человека, сколько раз его имя повторяется в массиве и сколько раз каждый из «цветов» также повторяется с этим определенным именем.

Это массив для таблицы:

var firstArray = [{
  "Name": "John Doe",
  "Green": "Yes",
  "Pink": "Yes",
  "Yellow": "No"
},
{
  "Name": "John Doe",
  "Green": "Yes",
  "Pink": "No",
  "Yellow": "No"
},
{
  "Name": "Mary",
  "Green": "No",
  "Pink": "No",
  "Yellow": "No"
},
{
  "Name": "Mary",
  "Green": "No",
  "Pink": "Yes",
  "Yellow": "No"
},
{
  "Name": "Mike",
  "Green": "Yes",
  "Pink": "Yes",
  "Yellow": "Yes"
},
{
  "Name": "Mike",
  "Green": "No",
  "Pink": "No",
  "Yellow": "No"
},
{
  "Name": "Mary",
  "Green": "Yes",
  "Pink": "Yes",
  "Yellow": "Yes"
}
]

И вот как мне нужно отобразить таблицу:

Я неНе знаю имен, которые будут вводить люди. Они могут вводить одно и то же имя столько раз, сколько хотят, или совершенно другое.

Я добавил этот код для подсчета количества повторений каждого имени:

var namesArray = [];
firstArray.forEach(function(e) {
    namesArray.push(e.Name);
});

var countNames = namesArray.reduce(function(obj, b) {
    obj[b] = ++obj[b] || 1;
    return obj;
}, {});
console.log(countNames);

Но после этогошаг Я совершенно не знаю, как составить таблицу, также не знаю, как сложить все зеленые, розовые и желтые для каждого Имени.
Есть ли у кого-нибудь лучший подход? Пожалуйста, помогите

Answer 1

Предполагая, что ваши цвета постоянны, вот базовый пример:

angular
  .module('colors', [])
  .controller('colorsCtrl', ['$scope', function($scope) {
    let firstArray = [{
      "Name": "John Doe",
      "Green": "Yes",
      "Pink": "Yes",
      "Yellow": "No"
    },
    {
      "Name": "John Doe",
      "Green": "Yes",
      "Pink": "No",
      "Yellow": "No"
    },
    {
      "Name": "Mary",
      "Green": "No",
      "Pink": "No",
      "Yellow": "No"
    },
    {
      "Name": "Mary",
      "Green": "No",
      "Pink": "Yes",
      "Yellow": "No"
    },
    {
      "Name": "Mike",
      "Green": "Yes",
      "Pink": "Yes",
      "Yellow": "Yes"
    },
    {
      "Name": "Mike",
      "Green": "No",
      "Pink": "No",
      "Yellow": "No"
    },
    {
      "Name": "Mary",
      "Green": "Yes",
      "Pink": "Yes",
      "Yellow": "Yes"
    }];
    
    $scope.colors = {};
    
    firstArray.forEach(function(item, index) {    
      if ($scope.colors[item.Name]) {
      	$scope.colors[item.Name].Total += 1;
        $scope.colors[item.Name].Green += (item.Green === 'Yes' ? 1 : 0);
        $scope.colors[item.Name].Pink += (item.Pink === 'Yes' ? 1 : 0);
        $scope.colors[item.Name].Yellow += (item.Yellow === 'Yes' ? 1 : 0);
      } else {
        $scope.colors[item.Name] = {
          'Total': 1,
          'Green': (item.Green === 'Yes' ? 1 : 0),
          'Pink': (item.Pink === 'Yes' ? 1 : 0),
          'Yellow': (item.Yellow === 'Yes' ? 1 : 0)
        };
      }
    });
  }]);

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: middle;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="colors" ng-controller="colorsCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Total</th>
        <th>Green</th>
        <th>Pink</th>
        <th>Yellow</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key, value) in colors">
        <td>{{ key }}</td>
        <td>{{ value.Total }}</td>
        <td>{{ value.Green }}</td>
        <td>{{ value.Pink }}</td>
        <td>{{ value.Yellow }}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

var tableArray = [];
firstArray.forEach(function(e) {

 var o = tableArray.find(obj => {
  return obj.Name === e.Name;
 });
 if(o  === "undefined") { o =  new Object(); }
 else{ 
  //delete object from array before adding it again
  tableArray.splice(tableArray.findIndex(item => item.Name === e.Name), 1);
 }

 o.Name = e.Name;
 o['Total'] = o.Total? ++o['Total'] : 1;
 //set default values for colors
 o['Green'] = o.Green? o.Green : 1;
 o['Pink'] = o.Pink? o.Pink: 1;
 o['Yellow'] = o.Yellow? o.Yellow: 1;

 //if there is an addition add it 
 o['Green'] = (e.Green=="Yes")? ++o['Green'] : o['Green'];
 o['Pink'] = (e.Pink=="Yes")? ++o['Pink'] : o['Pink'];
 o['Yellow'] = (e.Yellow=="Yes")? ++o['Yellow'] : o['Yellow'];
 tableArray.push(o);
});