如何在Angular中迭代$http.get？

Question

所以我使用API (精灵宝可梦api)来获取精灵宝可梦信息。

我已经成功地调用了信息，但我不确定如何获得一项的倍数。

例如,

$http.get("http://pokeapi.co/" + data.abilities[0].resource_uri)
            .success(function(data){
              console.log(data.name)
              $scope.ability = data;
            })

在这里，我不得不使用指定能力数组中的哪个对象(使用)，但我希望能够获得所有可用的能力。

我应该使用for in循环吗？如果是这样，我是否可以在.success中这样做，并让它输出它在我的html文件中找到的内容？例如，有

<p>{{ability.name}}</p>

输出%2或%3名称，而不是% 1。

Answer 1

这将检索api中每个pokemon的每个属性名称，并在ng-repeat中显示它。

jsFiddle：

http://jsfiddle.net/chrislewispac/z5aytdLs/

<div ng-app>
<div ng-controller="PromiseCtrl">
    <p></p>
    <p ng-repeat="name in pokeAttrNames">{{name}}</p>
</div>
</div>

function PromiseCtrl($scope, $http) {
$scope.pokeAttrNames =[];   

$http.get('http://pokeapi.co/api/v1/pokedex/1/')
     .then(function(result){
           result.data.pokemon.forEach(function(poke){
              $http.get('http://pokeapi.co/' + poke.resource_uri)
                   .then(function(value) {
                       $scope.pokeAttrNames.push(value.data.name);
                    });
            });
       });   
}

Answer 2

您可以通过添加$resource并在控制器中从工厂调用您的方法来使您的代码更简洁一些，我添加的所有内容都是一个for循环来处理每个请求。

  MyApp.controller('PromiseCtrl', function ($scope, $http, yourResource) { 

             for(var i in data.abilities) {
                 yourResource.save({abilities_uri: data.abilities[i].resource_uri}, function (response) {
                     console.log(data.abilities[i].resource_uri)
                    $scope.ability = data;
                 };
    }).factory('yourResource', ['$resource', function ($resource) {
              return $resource('http://pokeapi.co/:abilities_uri', {} {
                    'get': {
                      method: 'GET',
                      headers: {"Content-Type": "application/json"}
                    }
                  });
              }]);
    }

PD:这可能需要调整一下，例如您的$scope.ability可能应该是一个数组