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

Question

所以我使用 API (pokemon api) 来获取 pokemon 信息。

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

例如，

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

在这里，我不得不求助于指定能力数组中的哪个对象（使用 [0]），但我希望能够获得所有可用的能力。

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

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

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

Answer 1

您可以通过添加 $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 应该是一个数组

Answer 2

这会检索 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);
                    });
            });
       });   
}