Angular不会显示对象

时间:2014-09-05 20:04:21

标签: javascript json angularjs

所以我忙于Web应用程序,现在我正在解析一个对象。我刚刚尝试做的是获取所有结果的ID,但它在我的控制台中给了我未定义的内容。

我尝试了什么:

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

    app.controller("Controller", function($scope, $http) {
      $http.defaults.headers.common["Accept"] = "application/json";
        $http.get('api_url').

        success(function(data, status, headers, config) {
          $scope.games = data.results;
          $scope.id = data.results.id; 
         //Do i need a foreach here because it doesn't loop through all records and it gives me undefined.

        $http.get('http:/api/id/' + $scope.id + '?api_key=', function(e){ 

        }).
          success(function(data, status, headers, config) {
            $scope.details = data;
            console.log(data);
            //this returns the complete JSON
          });
        }).
        error(function(data, status, headers, config) {
          //handle errors
      });
    });

第一个http.get循环通过JSON,如:

"results": [
    {
    "easy": false,
    "id": 1,
    "title": "title",
    },
    {
    "easy": false,
    "id": 2,
    "title": "title",
    },
    {
    "easy": true,
    "id": 2,
    "title": "title",
    }
]

第二个需要做的是从JSON中获取所有ID并开始新的GET:

$http.get('http:/api/id/' + $scope.id + '?api_key=', function(e){ 

}).
  success(function(data, status, headers, config) {
    $scope.details = data;
    console.log(data.data);
  });
}) 

问题在于,$scope.id = data.results.id;是否正在撤回任何东西,我需要一个foreach或其他东西来循环通过它吗?

显示它我尝试了:

 <div ng-repeat="detail in details">
    {{ detail }}
    {{ detail.adult }}
</div>

但是没有显示任何内容(fyi我将$ scope.id = data.results.id更改为$ scope.id = data.results [0] .id;进行测试)

第二个GET的JSON如下:

{
  "adult": false,
  "collection": {
    "id": 131295,
    "name": "Collection",
  },
  "levels": [{
    "id": 28
  }, {
    "id": 12
  }, {
    "id": 878
  }],
  "homepage": "google",
  "id": 100402,
  "overview": "lorem ipsum"
}

我无法使用{{detail.adult}}访问该对象。

1 个答案:

答案 0 :(得分:2)

data.results.id没有返回任何内容的原因是因为data.results是一个对象数组。如果您想要的是一个具有data.results对象ID的数组,您可以这样做:

var resultIDs = data.results.map(function(result){return result.id;});

我不确定,但我认为这就是你想要的:

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

app.controller("Controller", function($scope, $http) {
  $scope.details = [];
  $http.defaults.headers.common["Accept"] = "application/json";
  $http.get('api_url').
  success(function(data, status, headers, config) {
      $scope.games = data.results;
      for(var i =0;i<$scope.games.lenght;i++){
         $http.get('http:/api/id/' + $scope.games[i].id + '?api_key=', function(e){ 

          }).
          success(function(data, status, headers, config) {
              $scope.details.push(data);
          });
       }
    }).
    error(function(data, status, headers, config) {
      //handle errors
  });
});

然而我会检查您使用的API是否有一个接受ID数组而不是单个ID的方法,这样您就不必像那样迭代

如果此API是RESTful服务,您可以不经迭代地执行此操作,如下所示:

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

app.controller("Controller", function($scope, $http) {
  $scope.details = [];
  $http.defaults.headers.common["Accept"] = "application/json";
  $http.get('api_url').
  success(function(data, status, headers, config) {
      $scope.games = data.results;
      var resultIDs = data.results.map(function(result){return result.id;});
       $http.get('http:/api?id=' + resultIDs.join(',') + '?api_key=', function(e){ 

       }).
       success(function(data, status, headers, config) {
            $scope.details = data;
       });
    }).
    error(function(data, status, headers, config) {
      //handle errors
  });
});