Question

尝试使用Pokeapi

在AngularJS中构建一个简单的Pokedex

我只想在视图中快速获取一些数据，因此在我的控制器中使用$ http（不用担心，以后会转移到资源中），而不是填充ng-repeat指令。我只调用1个终点抓取1个对象作为起点。但是，这样做我会得到多个空的重复呼叫。

JSFIDDLE

在小提琴中，我返回1个空的ng-repeat，然后是我请求的对象，接着是另外两个空白的ng-repeats。

在我的实际应用程序中，我得到了我要求的对象，然后是4个空白的ng-repeats。

我尝试使用$scope.characters = data[0];指定第一个数组对象，但未定义。

我缺少什么来返回我指定的1个对象？

HTML：

<body ng-app="myApp">
  <div ng-controller="pokedexCtrl">
    <div ng-repeat="pokemon in characters">
        <div>Name: {{pokemon.name}}</div>
        <img ng-src="http://pokeapi.co/media/img/{{pokemon.pkdx_id}}.png"/>
    </div>
  </div>
</body>

JS：

var app = angular.module('myApp', []);
  app.controller('pokedexCtrl', function($scope, $http){
    // get pokemon
      $http({
        method: 'GET',
        url: 'http://pokeapi.co/api/v1/pokemon/89/'
  }).then(function successCallback(data) {
    $scope.characters = data;
    console.log($scope.characters);
  }, function errorCallback(response) {});
});

答案：

感谢Grundy，

JSFIDDLE ANSWER UPDATE

要使特定答案$scope.characters = [data.data];返回单个对象。

Answer 1

这是因为API返回的是Object而不是带有对象的数组。

将对象转换为数组，它将按预期工作。

$scope.characters = [data];

Answer 2

ngRepeat可以使用数组：迭代元素，使用object：迭代对象属性。在您的情况下，您迭代传递给成功calback的响应对象。

响应对象具有以下属性：


data - {string | Object} - 使用转换函数转换的响应体。

status - {number} - 响应的HTTP状态代码。

headers - {function（[headerName]）} - Header getter function。

config - {Object} - 用于生成请求的配置对象。

statusText - {string} - 响应的HTTP状态文本。

要解决，首先，您需要使用 data 属性 - 这是您期望的真实对象。

所以你可以像这样改变你的成功回调

.then(function successCallback(response) {
    $scope.characters = response.data;
    ...
});

接下来，如果你真的想在你的情况下使用ng-repeat：将对象包装到数组，当然如果response.data已经不是数组

.then(function successCallback(response) {//
    $scope.characters = [response.data];
    ...
});

另一种方式，如果你知道，这个响应总是只返回一个对象 - 你不需要ng-repeat。

<body ng-app="myApp">
  <div ng-controller="pokedexCtrl">
    <div>
      <div>Name: {{pokemon.name}}</div>
      <img ng-src="http://pokeapi.co/media/img/{{pokemon.pkdx_id}}.png"/>
    </div>
  </div>
</body>

并在回调中

.then(function successCallback(response) {
    $scope.pokemon = response.data;
    ...
});

ngRepeat单个对象上的多个空白返回

2 个答案: