CODEWITHSUNDEEP
angularjsjsonionic-framework
smartsoldier
smartsoldier

Reputation: 153

How do I get the nested data from JSON AngularJS

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

Upvotes: 0

Views: 72

Answers (2)

Sajeetharan
Sajeetharan

Reputation: 222582

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>

Upvotes: 1

federico scamuzzi
federico scamuzzi

Reputation: 3778

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>

Upvotes: 0

Related Questions