How do I get the nested data from JSON AngularJS

Question

I want to get the average rating from the Reviews and display it but I'm unsure on how to do it.

JSON

"Reviews":[
    {
      "OwnerID":1,
      "Comment": "Charlotte is brilliant. A lovely person. Thank you!",
      "rating":4
    },
    {
      "OwnerID":2,
      "Comment": "The best dog carer ever! She is amazing",
      "rating":4
    }
  ],

html file

<ion-item ng-repeat="item in PetCareProfile>
    <span ng-repeat="rate in item.Reviews" class="item-text-wrap"> {{calculateAverage(rate.rating)}} </span>
</ion-item>

Controller

.controller('CareTakerProfileCtrl',
function($scope,$http,$stateParams,$ionicPopup, ionicDatePicker) 
{
    $http.get('js/SampleJson.json').success(function (data) {
    $scope.PetCareProfile = data.PetCareTakers;
    $scope.whichPetCareProfile = $stateParams.aId;

    $scope.calculateAverage = function(MyData){
    var sum = 0;
    for(var i = 0; i < MyData.length; i++){
      sum += parseInt(MyData[i], 10); //don't forget to add the base
    }

    var avg = sum/MyData.length;

  return avg;
};
})

Result: NaN NaN NaN

What I wanted: 4.3333333

Sajeetharan · Accepted Answer · 2017-01-04 15:52:09Z

1

You can pass the array to function and calculate the average using angular.forEach()

 <li ng-repeat="item in PetCareProfile">
         {{calculateAverage(item)}} 
 </li>

DEMO

var app = angular.module("app", []);

app.controller("ListCtrl", ["$scope",
  function($scope) {

    $scope.PetCareProfile = [{
      "Reviews": [{
        "OwnerID": 1,
        "Comment": "Charlotte is brilliant. A lovely person. Thank you!",
        "rating": 4
      }, {
        "OwnerID": 2,
        "Comment": "The best dog carer ever! She is amazing",
        "rating": 4
      }]
    }]; // 
  
    $scope.loopcount = 0;
    $scope.calculateAverage = function(MyData) {
      $scope.sum = 0;
      var filterData = MyData.Reviews;
      angular.forEach(filterData, function(val) {
        $scope.sum += val.rating;
      });
      var avg = $scope.sum / filterData.length;
      return avg;
    };
  }
]);

<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app='app'>
  <div ng-controller="ListCtrl">
    <ul>
      <li ng-repeat="item in PetCareProfile">
         {{calculateAverage(item)}} 
      </li>
    </ul>
  </div>


</body>

</html>

edited Jan 4, 2017 at 15:52

answered Jan 4, 2017 at 8:51

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

9 Comments

smartsoldier Over a year ago

Hi thank you for your reply. However, item.rating doesn't seem to work.

Sajeetharan Over a year ago

can i see your controller?

smartsoldier Over a year ago

Hi there I have just updated my question and added my controller

smartsoldier Over a year ago

Sorry no :( I dont have teamviewer

Sajeetharan Over a year ago

@JoshSoh check the demo

|

federico scamuzzi · Accepted Answer · 2017-01-04 09:00:01Z

0

Have you tried with:

 <ion-list>
    <ion-item ng-repeat="item in PetCareProfile>
    {{item.rating}}
</ion-item>
 </ion-list>

but if you want (only in IONIC) you can use also (instead of ng-repeat)

<ion-content>
  <ion-item collection-repeat="item in PetCareProfile">
    {{item.rating}}
  </ion-item>
</ion-content>

answered Jan 4, 2017 at 9:00

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

5 Comments

smartsoldier Over a year ago

Hi thank you for your reply. However, item.rating doesn't seem to work.

federico scamuzzi Over a year ago

sorry maybe try with tem.Reviews.rating

smartsoldier Over a year ago

I've tried with item.Reviews.rating however the value only comes out when I put it as item.Reviews[1].rating. I don't want a individual number but a array of the rating.

federico scamuzzi Over a year ago

ah ok ..so try to do or a double ng-rpeat or just try with ng-repeat="item in PetCareProfile.Reviews

smartsoldier Over a year ago

Hi there it worked when I put a double ng-repeat. However, the data shows "4,4,5" although I wanted it to be the average of them

Collectives™ on Stack Overflow

How do I get the nested data from JSON AngularJS

2 Answers 2

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related