计算嵌套JSON

平均有angularjs我收到这样的JSON响应：计算嵌套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" 
     } 
     } 
    ] 
    }

我想要做的就是从每个产品计算平均ratingReview并显示它，现在我的HTML如下：

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

其实看起来像这样在浏览器：

我想是这样的：

BTW不是所有的产品都具有审核评分等等的情况下，是空洞的表演没什么

来源

2017-04-05 Angel Silva

您可能要在将其发送到前端之前计算平均值。来自服务器的消息将随附在标题中，然后是产品列表。 –

因为您使用重复，它会重复所有审查和显示像这样 – Akashii

创建函数如下

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

在div中调用此方法如下

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

来源

2017-04-05 14:00:32

非常感谢，你能帮助我与星星？现在我的平均水平如何根据平均值重复星星 –

不要忘记检查长度（不要用0除），请参阅我的答案。 – Groben

也尝试避免for循环，请改用angular.forEach。所以你不会有角度阵列奇怪的惊喜。 – Groben

您可以使用一个函数：

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

和：

$scope.getAverage = function(reviews){ 
    var sum = 0; 
    var cpt = 0; 
    angular.forEach(reviews, function(review){ 
     cpt++; 
     sum += review.ratingReview; 
    }); 
    if(cpt === 0){ 
     return 0; 
    } 
    return sum/cpt; 
}

来源

2017-04-05 13:57:29 Groben

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

.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>

来源

2017-04-05 14:23:05

回答

相关问题