使用嵌套json中的angularjs计算平均值

我收到如下JSON响应：

{
    "productDesc": "Other posterior corneal dystrophies",
    "ProductId": 1,
    "productName": "Keylex",
    "productPrice": 3529.24,
    "productStatus": false,
    "productStock": 23,
    "productModifyDate": "2016-10-13T20:13:12",
    "productUrl": "http://dummyimage.com/153x172.jpg/5fa2dd/ffffff",
    "ReviewProducts": [
      {
        "ratingReview": 8.2,
        "reviewDesc": "aaaaa",
        "ReviewProductIdNumber": 1,
        "User": {
          "username": "hsullivan0",
          "UserId": 1,
          "name": "Heather",
          "lastName": "Sullivan"
        }
      },
      {
        "ratingReview": 6.8,
        "reviewDesc": "mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit ac nulla sed",
        "ReviewProductIdNumber": 2,
        "User": {
          "username": "jcarrod",
          "UserId": 878,
          "name": "Jessica",
          "lastName": "Carr"
        }
      }
    ]
  }

<div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="x in product | limitTo:30">
    <div class="thumbnail">
        <img ng-src="{{x.productUrl}}" alt="">
        <div class="caption">
            <h4 class="pull-right">{{x.productPrice | currency}}</h4>
            <h4>
                <a href="#">{{x.productName}}</a>
            </h4>
            <p>{{x.productDesc}}.</p>
        </div>
        <div class="ratings" ng-repeat="review in x.ReviewProducts">
            <p class="pull-right">{{review.ratingReview}}</p>
            <p>
                <span class="glyphicon glyphicon-star"></span>
            </p>
        </div>
    </div>
</div>

我想做的是计算每个产品的平均评分并显示出来，现在我的html如下所示：

{
    "productDesc": "Other posterior corneal dystrophies",
    "ProductId": 1,
    "productName": "Keylex",
    "productPrice": 3529.24,
    "productStatus": false,
    "productStock": 23,
    "productModifyDate": "2016-10-13T20:13:12",
    "productUrl": "http://dummyimage.com/153x172.jpg/5fa2dd/ffffff",
    "ReviewProducts": [
      {
        "ratingReview": 8.2,
        "reviewDesc": "aaaaa",
        "ReviewProductIdNumber": 1,
        "User": {
          "username": "hsullivan0",
          "UserId": 1,
          "name": "Heather",
          "lastName": "Sullivan"
        }
      },
      {
        "ratingReview": 6.8,
        "reviewDesc": "mattis pulvinar nulla pede ullamcorper augue a suscipit nulla elit ac nulla sed",
        "ReviewProductIdNumber": 2,
        "User": {
          "username": "jcarrod",
          "UserId": 878,
          "name": "Jessica",
          "lastName": "Carr"
        }
      }
    ]
  }

<div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="x in product | limitTo:30">
    <div class="thumbnail">
        <img ng-src="{{x.productUrl}}" alt="">
        <div class="caption">
            <h4 class="pull-right">{{x.productPrice | currency}}</h4>
            <h4>
                <a href="#">{{x.productName}}</a>
            </h4>
            <p>{{x.productDesc}}.</p>
        </div>
        <div class="ratings" ng-repeat="review in x.ReviewProducts">
            <p class="pull-right">{{review.ratingReview}}</p>
            <p>
                <span class="glyphicon glyphicon-star"></span>
            </p>
        </div>
    </div>
</div>

{x.productPrice | currency}
{{x.productDesc}}

{{review.ratingReview}

实际上在浏览器中看起来是这样的：

我想要的是这样的东西：

---

顺便说一句，并非所有产品都有审查评级，因此如果为空，则不显示任何内容

您可以使用以下功能：

    <div class="ratings">
        <p class="pull-right">{{getAverage(x.ReviewProducts}}</p>
        <p>
            <span class="glyphicon glyphicon-star"></span>
        </p>
    </div>

---

创建如下所示的函数

$scope.getAvg= function(ReviewProducts){
    var total = 0;
    for(var i = 0; i < ReviewProducts.length; i++) 
    {
       total += ReviewProducts[i].ratingReview;
    }
    var avg = total / ReviewProducts.length;
    return avg;
}

$scope.getAvg=函数（查看产品）{
var合计=0；
对于（变量i=0；i

在div中调用此方法，如下所示

<div>{{getAvg(ReviewProducts)}}</div>

{{getAvg（ReviewProducts）}

您可以尝试使用下面的过滤器

.filter('ratingavg', function() {
    return function(data, key) {
      if (angular.isUndefined(data) || angular.isUndefined(key))
        return 0;
      var sum = 0;    
      angular.forEach(data, function(v, k) {
        sum = sum + parseInt(v[key]);
      });
      return sum / data.length;
    }

 })

<div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="x in product | limitTo:30">
    <div class="thumbnail">
        <img ng-src="{{x.productUrl}}" alt="">
        <div class="caption">
            <h4 class="pull-right">{{x.productPrice | currency}}</h4>
            <h4>
                <a href="#">{{x.productName}}</a>
            </h4>
            <p>{{x.productDesc}}.</p>
        </div>
   <div class="ratings"> {{x.ReviewProducts| ratingavg:'ratingReview'}}</div>          
    </div>
</div>

.filter（'ratingavg'，function（）{
返回函数（数据、键）{
if（角度未定义（数据）| |角度未定义（键））
返回0；
var总和=0；
角度.forEach（数据，函数（v，k）{
sum=sum+parseInt（v[key]）；
});
返回和/数据长度；
}
})
{x.productPrice | currency}
{{x.productDesc}}

{x.ReviewProducts | ratingavg:'ratingReview'}

在发送到前端之前，您可能需要计算平均值。你从服务器发来的信息会包含在标题中，然后是产品列表。因为你使用repeat，它会像这样重复所有评论和显示谢谢，你能帮我看星星吗？现在我有了平均值，如何根据平均值重复星星不要忘了检查长度（不要除以0），请参见我的答案。还要尽量避免循环，请改用angular.forEach。因此，使用角度阵列不会有奇怪的惊喜。