时间戳

首页 > 解决方案 > Ng-repeat 列表，其中包含重复元素的许多值的次数

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

问题描述

我需要制作一个表格，显示该人的姓名、他的名字在数组中重复的次数，以及每个“颜色”的重复次数。

这是表的数组：

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

但是在这一步之后，我对如何制作表格完全一无所知，也不知道如何将每个名称的所有绿色、粉色和黄色相加。
有人有更好的方法吗？请帮忙

标签： javascriptangularjs

解决方案

假设您的颜色是恒定的，这里是基本示例：

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>

推荐阅读