calculate average with angularjs in nested json

Question

I receive a JSON response like this:

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

What I want to do is calculate the average ratingReview from each product and show it, right now my html looks like this:

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

Actually looks like this in the browser:

What I want is something like this:

BTW not all products have a review rating so in case is empty show nothing

You probably want to calculate the average before you send it to the front end. Your message from the server would come with that in a header, and then the list of products. — user3180309
– user3180309, Commented Apr 5, 2017 at 13:54
because you use repeat , it will repeat all review and show like this — Akashii
– Akashii, Commented Apr 5, 2017 at 13:54

Anurag Dadheech · Accepted Answer · 2017-04-05 14:00:32Z

1

Create function as below

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

call this method in div as below

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

answered Apr 5, 2017 at 14:00

Anurag Dadheech

6291 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Angel Silva Over a year ago

Thank you very much, can you help me with the stars? Now that I have the average how can I repeat the stars according to the average

Groben Over a year ago

Don't forget to check the length (don't divide by 0), see my answer.

Groben Over a year ago

Also try to avoid for loops, use angular.forEach instead. So you won't have weird surprises with angular arrays.

Groben · Accepted Answer · 2017-04-05 13:57:29Z

0

You can use a function:

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

and:

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

answered Apr 5, 2017 at 13:57

Groben

1,3862 gold badges10 silver badges29 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-04-05 14:23:05Z

You can try with filter like below.

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

Collectives™ on Stack Overflow

calculate average with angularjs in nested json

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related