(新手)使用ng-repeat和for循环从对象数组中获取数据

时间:2016-07-08 04:54:40

标签: angularjs

我必须访问数组中的一些对象:

.success(function(data) { 
    $scope.activities = data.result[0].attributes 
});

我可以按照预期在我的视图中使用

访问此特定索引
<div ng-repeat="x in activities">
    <p>{{x.name}}: {{x.value}}</p>
</div>

现在显然,这只返回数组中的第一个对象,索引为0.(对吗?)。所以我想我必须以某种方式循环函数..

.success(function(data) {
    for(var i = 0; i < data.result.length; i++) {
        $scope.activities = data.result[i].attributes;
    }
});

据我所知,实际的for循环正在工作..但我需要帮助,在下一步中将此暴露给我的观点。

这是我的傻瓜:https://plnkr.co/edit/2ZukY3Oq8vYvghfCruHx?p=preview

(虽然数据不可用,但我在评论中添加了回复的内容)

2 个答案:

答案 0 :(得分:0)

好吧,由于您在plnkr中粘贴的JSON数据无效,我不知道attributes的含义,如果它只是对象或它是对象的数组,无论如何我把它作为单个对象。

修改

从现在起我知道attributes对象数组,您可以使用special repeats实现所需目标。

这是一个代码片段:

&#13;
&#13;
(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.getLeadActivities = function() {
        var url = 'xxxxxxxx.mktorest.com';
        var endpoint = '/rest/v1/activities.json';
        var activityTypeIds = '46';
        var access_token = $scope.access_token;
        var leadIds = $scope.leadId;
        var nextPageToken = $scope.pagingToken;
       
        // This is your data from API
        var data = {  
           "requestId":"14213#155c8de2578",
           "success":true,
           "nextPageToken":"EOXAPD2V5UOJ5B3S5GGP7NUCX6UI6BFXCWHPJXF245PN2QTGMF3Q====",
           "moreResult":false,
           "result":[  
              {  
                 "id":75843491,
                 "leadId":5334578,
                 "activityDate":"2016-07-06T06:45:11Z",
                 "activityTypeId":46,
                 "primaryAttributeValue":"Web",
                 "attributes":[  
                    {  
                       "name":"myDataName",
                       "value":"myDataValue"
                    }
                 ]
              },
              {  
                 "id":75843491,
                 "leadId":5334578,
                 "activityDate":"2016-07-06T06:45:11Z",
                 "activityTypeId":46,
                 "primaryAttributeValue":"Web",
                 "attributes":[  
                    {  
                       "name":"myDataName2",
                       "value":"myDataValue2"
                    }
                 ]
              },
              {  
                 "id":75843491,
                 "leadId":5334578,
                 "activityDate":"2016-07-06T06:45:11Z",
                 "activityTypeId":46,
                 "primaryAttributeValue":"Web",
                 "attributes":[  
                    {  
                       "name":"myDataName3",
                       "value":"myDataValue3"
                    }
                 ]
              }
           ]
        };

        // You'll put it inside the THEN method of your $http.get
        $scope.activities = data.result;
      }
    });
})();
&#13;
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <button ng-click="getLeadActivities()">Get Lead Activities</button>
  <div ng-repeat-start="activity in activities"></div>
  <ul ng-repeat-end ng-repeat="attr in activity.attributes">
    <li ng-bind="attr.name + ': ' + attr.value"></li>
  </ul>
</body>

</html>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

根据我对您的问题的理解,您可以使用两个ng-repeat子句来解决它。

您的控制器代码,

.success(function(data) { 
    $scope.ativitiesArray = data.result; 
});

你的HTML代码,

<div ng-repeat="activities in activitiesArray track by $index">
    <div ng-repeat="x in activities.attributes track by $index">
        <p>{{x.name}}: {{x.value}}</p>
    </div>
</div>

我已将track by $index短语添加到ng-repeat,因为它会提高效果。另外,根据评论中的建议,请避免使用.success()。建议使用.then()

希望这可以解决问题。