javascript - Ng-repeat 列表，其中包含重复元素的多个值的次数

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>