AngularJS顯示對象內數組字段值的總數

Question

我試圖獲取對象內數組的字段值的總數，並使用ng-repeat將其顯示爲視圖。對於每個名稱，我希望如何使用下面的JSON數據來顯示評論評分值的總和。我能夠獲得每個數組有多少評論的值，但我也無法顯示它。

下面是我使用的JSON數據：

[{"_id":"56873fdb182b3741059357d1","longitude":123.76338959999998, 
    "latitude":10.2594266,"location":"Cebu City","name":"Cebu City","__v":0, 
    "category":"Attraction", 
    "reviews":[ 
      {"comment":"This is a test. Changed to 3.5 stars.","rating":3.5,"userId":null,"review_id":"tiGCG2rGroIn"} 
    ]}, 
{"_id":"56873fc9182b3741059357d0","longitude":113.83507800000007,"latitude":22.1533884,"location":"Hong Kong","name":"Hong Kong","__v":0,"category":"Attraction", 
    "reviews":[{"comment":"Add the comment to the form","rating":3.5,"userId":11,"review_id":"44NL7kkwhy72"}, 
      {"comment":"I'm not impressed by your performance. - GSP","rating":1.5,"userId":11,"review_id":"jN7f1iFlQVha"}, 
      {"comment":"Test","rating":2.5,"userId":11,"review_id":"QcJpw4yopF1q"}]}] 

角碼

.controller('HomeCtrl', function($rootScope, $scope, LocFac) { 

LocFac.getLocations().then(function successCallback(data) { 
    $scope.locations = data.data;  
    //for each location get a rating 
    $scope.loclen = ($scope.locations).length; 

    //for each repeat 
    var total = 0; 
    for(var i = 0; i < $scope.loclen; i++){ 
     var loc = $scope.locations[i]; 
     //get amount of reviews for each location 
     reviewlen = (loc.reviews).length; 

     locreviews = $scope.locations[i].reviews; 

     //average the reviews for each location 
     ratings = locreviews; 
     total += (ratings.rating); 

     console.log(ratings); 
    } 
    }); 
}) 

Answer 1

爲了在視圖中顯示對象的值，你應該把它添加到$範圍。

.controller('HomeCtrl', function($rootScope, $scope, LocFac) { 

LocFac.getLocations().then(function successCallback(data) { 
    $scope.locations = data.data;  
    //for each location get a rating 
    $scope.loclen = ($scope.locations).length; 

    //for each repeat 
    var total = 0; 
    for(var i = 0; i < $scope.loclen; i++){ 
    var loc = $scope.locations[i]; 
    //get amount of reviews for each location 
    var reviewlen = (loc.reviews).length; 

    $scope.locreviews = $scope.locations[i].reviews; 

    //average the reviews for each location 
    $scope.ratings = locreviews; 
    $scope.total += (ratings.rating); 

    console.log(ratings); 
    } 
    }); 
}) 

一旦你做到了這一點，你可以這樣認爲裏面訪問：

<label>{{ratings}}</label> 
<label>{{total}}</label> 

Answer 2

說起來很簡單..試試這個下面的代碼。

$scope.data = [{ 
    "_id": "56873fdb182b3741059357d1", 
    "longitude": 123.76338959999998, 
    "latitude": 10.2594266, 
    "location": "Cebu City", 
    "name": "Cebu City", 
    "__v": 0, 
    "category": "Attraction", 
    "reviews": [{ 
     "comment": "This is a test. Changed to 3.5 stars.", 
     "rating": 3.5, 
     "userId": null, 
     "review_id": "tiGCG2rGroIn" 
    }] 
}, { 
    "_id": "56873fc9182b3741059357d0", 
    "longitude": 113.83507800000007, 
    "latitude": 22.1533884, 
    "location": "Hong Kong", 
    "name": "Hong Kong", 
    "__v": 0, 
    "category": "Attraction", 
    "reviews": [{ 
     "comment": "Add the comment to the form", 
     "rating": 3.5, 
     "userId": 11, 
     "review_id": "44NL7kkwhy72" 
    }, { 
     "comment": "I'm not impressed by your performance. - GSP", 
     "rating": 1.5, 
     "userId": 11, 
     "review_id": "jN7f1iFlQVha" 
    }, { 
     "comment": "Test", 
     "rating": 2.5, 
     "userId": 11, 
     "review_id": "QcJpw4yopF1q" 
    }] 
}]; 

您必須通過使用ng-repeat循環此$ scope.data。例如：

<div> 

    <ul ng-repeat="location in data"> 
     <li ng-repeat="review in location.reviews"> 
      {{review.comment}} 
     </li> 

    </ul> 

</div> 

我希望這會有所幫助。