2017-04-05 5 views
1

Je reçois une réponse JSON comme ceci:calculer la moyenne avec AngularJS dans JSON imbriqué

{ 
    "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" 
     } 
     } 
    ] 
    } 

Ce que je veux faire est de calculer la ratingReview moyenne de chaque produit et le montrer, maintenant mon html ressemble à ceci:

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

ressemble en fait dans le navigateur: Preview

ce que je veux quelque chose comme ceci: Expected Result

BTW tous les produits ont une note d'examen ainsi dans le cas est rien show vide

+1

Vous souhaitez probablement calculer la moyenne avant de l'envoyer au frontal. Votre message du serveur viendrait avec cela dans un en-tête, puis la liste des produits. –

+0

parce que vous utilisez répéter, il va répéter tous les avis et montrer comme ça – Akashii

Répondre

1

Créer fonction ci-dessous

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

appeler cette méthode dans div comme ci-dessous

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

Merci beaucoup, pouvez-vous m'aider avec les étoiles? Maintenant que j'ai la moyenne comment puis-je répéter les étoiles selon la moyenne –

+0

Ne pas oublier de vérifier la longueur (ne pas diviser par 0), voir ma réponse. – Groben

+0

Essayez également d'éviter les boucles, utilisez plutôt angular.forEach. Vous n'aurez donc pas de surprises étranges avec les tableaux angulaires. – Groben

0

Vous pouvez utiliser une fonction:

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

et:

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

Vous pouvez essayer avec le filtre comme ci-dessous.

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