計算嵌套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

回答

相關問題