AngularJS显示对象内数组的字段值

时间:2016-01-22 01:08:45

标签: arrays json object

我试图获取对象内的数组的字段值的总和,并使用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"}]}]

Angular Code

 .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);
     } 
  });  
})

2 个答案:

答案 0 :(得分:0)

要在视图上显示对象值,您应将其添加到$ scope。

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

答案 1 :(得分:0)

这很简单..试试下面的代码。

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

我希望这会有所帮助。