Javascript Ng repeat list，表示元素的多个值被重复的次数

我需要做一个表格，显示这个人的名字，他的名字在数组中被重复的次数，以及每个颜色在这个名字中被重复的次数

这是表的数组：

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

---

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

假设您的颜色不变，以下是基本示例：

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

有棱角的 .module'colors'，[] .controller'colorsCtrl'，['$scope'，function$scope{ 设firstArray=[{ 姓名：约翰·多伊， 格林：是的， 粉红：是的， 黄色：没有 }, { 姓名：约翰·多伊， 格林：是的， 粉红：不， 黄色：没有 }, { 姓名：玛丽， 格林：不， 粉红：不， 黄色：没有 }, { 姓名：玛丽， 格林：不， 粉红：是的， 黄色：没有 }, { 姓名：迈克， 格林：是的， 粉红：是的， 黄：是的 }, { 姓名：迈克， 格林：不， 粉红：不， 黄色：没有 }, { 姓名：玛丽， 格林：是的， 粉红：是的， 黄：是的 }]; $scope.colors={}； firstArray.forEachfunctionitem，索引{ 如果$scope.colors[项目名称]{ $scope.colors[item.Name].Total+=1； $scope.colors[item.Name].Green+=item.Green==“是”？1:0； $scope.colors[item.Name].Pink+=item.Pink==“是”？1:0； $scope.colors[item.Name].Yellow+=item.Yellow==“是”？1:0； }否则{ $scope.colors[item.Name]={ “总计”：1， “绿色”：item.Green==“是”？1:0， “粉红”：item.Pink==“是”？1:0， “黄色”：项。黄色==“是”？1:0 }; } }; }]; .桌子{ 宽度：100%； 边缘底部：1rem； 颜色：212529； } .表th， .表td{ 填充：0.75rem； 垂直对齐：中间对齐； 文本对齐：居中； } 名称 全部的 绿色 粉红色 黄的 {{key}} {{value.Total} {{value.Green}} {{value.Pink}} {{value.Yellow}

---

假设颜色不变，下面是一个基本示例：

有棱角的 .module'colors'，[] .controller'colorsCtrl'，['$scope'，function$scope{ 设firstArray=[{ 姓名：约翰·多伊， 格林：是的， 粉红：是的， 黄色：没有 }, { 姓名：约翰·多伊， 格林：是的， 粉红：不， 黄色：没有 }, { 姓名：玛丽， 格林：不， 粉红：不， 黄色：没有 }, { 姓名：玛丽， 格林：不， 粉红：是的， 黄色：没有 }, { 姓名：迈克， 格林：是的， 粉红：是的， 黄：是的 }, { 姓名：迈克， 格林：不， 粉红：不， 黄色：没有 }, { 姓名：玛丽， 格林：是的， 粉红：是的， 黄：是的 }]; $scope.colors={}； firstArray.forEachfunctionitem，索引{ 如果$scope.colors[项目名称]{ $scope.colors[item.Name].Total+=1； $scope.colors[item.Name].Green+=item.Green==“是”？1:0； $scope.colors[item.Name].Pink+=item.Pink==“是”？1:0； $scope.colors[item.Name].Yellow+=item.Yellow==“是”？1:0； }否则{ $scope.colors[item.Name]={ “总计”：1， “绿色”：item.Green==“是”？1:0， “粉红”：item.Pink==“是”？1:0， “黄色”：项。黄色==“是”？1:0 }; } }; }]; .桌子{ 宽度：100%； 边缘底部：1rem； 颜色：212529； } .表th， .表td{ 填充：0.75rem； 垂直对齐：中间对齐； 文本对齐：居中； } 名称 全部的 绿色 粉红色 黄的 {{key}} {{value.Total} {{value.Green}} {{value.Pink}} {{value.Yellow}

---

这在o.Name=e.Name；，行中给出了一个错误；，它说无法设置未定义的属性'Name'，所以还有另一个问题：您将如何翻译表达式：item=>item.Name==e.Name而不使用箭头函数=>，因为IE不支持它们，我不确定如何正确翻译此函数这在o.Name=e.Name；，行上给了我一个错误；，它说无法设置未定义的属性'Name'，所以还有另一个问题：如何翻译表达式：item=>item.Name==e.Name不带箭头函数=>，因为IE不支持它们，我不确定如何准确翻译这个表达式