在angularJs中匹配来自同一阵列中不同对象的值

-1

我在下面有这个json，如果有更多的对象具有更多的国家和奖牌，那么角度最好的方法是什么？在angularJs中匹配来自同一阵列中不同对象的值

[ 
{ 
"athlete": "KOGO, Micah", 
"country": "KEN", 
"sex": "Men", 
"event": "10000m", 
"medal": "Bronze" 
}, 
{ 
"athlete": "BEKELE, Kenenisa", 
"country": "ETH", 
"sex": "Men", 
"event": "10000m", 
"medal": "Gold" 
}, 
{ 
"athlete": "SIHINE, Sileshi", 
"country": "ETH", 
"sex": "Men", 
"event": "10000m", 
"medal": "Silver" 
}, 
{ 
"athlete": "FLANAGAN, Shalane", 
"country": "USA", 
"sex": "Women", 
"event": "10000m", 
"medal": "Bronze" 
} 
]

来源

2017-02-21 ronoc4

什么是你想要的输出？ –

显示每个国家的奖牌数和赢得的奖牌 – ronoc4

好的，您希望输出结构如何？我想你可能能够提供基于样本输入的样本输出。 –

这创建了一个无序的奖牌清单国家列表。

var app = angular.module("yourApp", []); 
 

 
app.controller("controller", function($scope) { 
 

 
    $scope.input = [{ 
 
     "athlete": "KOGO, Micah", 
 
     "country": "KEN", 
 
     "sex": "Men", 
 
     "event": "10000m", 
 
     "medal": "Bronze" 
 
    }, 
 
    { 
 
     "athlete": "BEKELE, Kenenisa", 
 
     "country": "ETH", 
 
     "sex": "Men", 
 
     "event": "10000m", 
 
     "medal": "Gold" 
 
    }, 
 
    { 
 
     "athlete": "SIHINE, Sileshi", 
 
     "country": "ETH", 
 
     "sex": "Men", 
 
     "event": "10000m", 
 
     "medal": "Silver" 
 
    }, 
 
    { 
 
     "athlete": "FLANAGAN, Shalane", 
 
     "country": "USA", 
 
     "sex": "Women", 
 
     "event": "10000m", 
 
     "medal": "Bronze" 
 
    } 
 
    ]; 
 

 
    $scope.countries = $scope.input.map(function(obj) { 
 
    return obj.country; 
 
    }); 
 

 
    $scope.uniqueCountries = $scope.countries.filter(function(item, pos) { 
 
    return $scope.countries.indexOf(item) == pos; 
 
    }) 
 

 
    $scope.getMedalCount = function(country, colour) { 
 
    var count = 0; 
 
    angular.forEach($scope.input, function(obj) { 
 
     if ((obj.country === country) && (obj.medal === colour)) { 
 
     count++; 
 
     } 
 
    }); 
 
    return count; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="yourApp"> 
 
    <div ng-controller="controller"> 
 
    <ul> 
 
     <li ng-repeat="country in uniqueCountries"> 
 
     {{ country }} 
 
     <ul> 
 
      <li>Gold: {{ getMedalCount(country, "Gold") }}</li> 
 
      <li>Silver: {{ getMedalCount(country, "Silver") }}</li> 
 
      <li>Bronze: {{ getMedalCount(country, "Bronze") }}</li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

来源

2017-02-21 19:40:43

在angularJs中匹配来自同一阵列中不同对象的值

回答

相关问题