多个API调用

我是相当新的AngularJS和我在练低于行使要求多个API调用

1.使用API来获取20个职位，并与谁创造了用户的名在页面上显示它们发布并在页面上显示它们。在本练习中，我使用的是https://jsonplaceholder.typicode.com/作为数据源。我需要在同一个控制器做2 API调用

要获得的20个职位列表，它有它（https://jsonplaceholder.typicode.com/posts）

基于以上的用户ID，我需要得到名为userid（https://jsonplaceholder.typicode.com/users/userId ）请看我在plnkr完成的工作，我可以显示发布但不是用户名。

的script.js

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
    $http.get("https://jsonplaceholder.typicode.com/posts").then(function(response) { 
     $scope.data = response.data; 
     var postList = []; 
     for (var i = 0; i < 20; i++) { 
      var display = { 
       UserName: $http.get("https://jsonplaceholder.typicode.com/users/" + $scope.data[i].userId).then(function(response) { 
        $scope.user = response.data; 
       }), 
       Post: $scope.data[i].title 
      } 
      postList.push(display); 
     } 
     $scope.list = postList; 
    }); 
});

的Index.html

<div ng-repeat="x in list"> 
    Post:{{ x.Post }} 
    UserName:{{x.UserName}} 
</div>

来源

2017-09-04 62071072SP

哪里是plunker链接？ –

我相信这方面是错误的：

.then(function(response) { 
    $scope.data = response.data; 
    var postList = []; 
    for (var i = 0; i < 20; i++) { 

    var display = { 
     UserName: $http.get("https://jsonplaceholder.typicode.com/users/"+$scope.data[i].userId).then(function(response){ 
     $scope.user = response.data; 
     }), 
     Post: $scope.data[i].title 
    } 
    postList.push(display); 
    } 
    $scope.list = postList; 
});

您在UserName属性中存储Promise object并产生意外结果。

纠正这种分配postList请求完成后：

.then(function(response) { 
    $scope.data = response.data; 
    var postList = []; 

    for (var i = 0; i < 20; i++) { 

    $http.get("https://jsonplaceholder.typicode.com/users/"+$scope.data[i].userId).then(function(response){ 
     $scope.user = response.data; 

     var display = { 
     UserName: "", 
     Post: $scope.data[i].title 
     }; 

     $scope.list.push(display); 
    }); 
    } 

    $scope.list = postList; 
});

一旦你实现了这个，你会遇到一个新的问题：

，因为你叫循环$http.get()和实际使用的变量i.then()内.then().then()执行值i已在其最终形式，这是每.then()调用将收到的i = 20 | data.length。

为了克服这个问题，我所知道的最好的办法是在显示之前先格式化整个数据：这样，我们确信该数据是在视图中显示它之前完成

$http.get("https://jsonplaceholder.typicode.com/posts") 
    .then(function(response) 
    { 
    var data  = response.data; 
    var postList = []; 
    // this will check if formatting is done. 
    var cleared = 0; 

    // create a function that checks if data mapping is done. 
    var allClear = function() { 
     if (postList.length == cleared) 
     { 
     // display the formatted data 
     $scope.list = postList; 
     } 
    }; 

    for (var i = 0; i < data.length; i++) 
    { 
     // create a object that stores the necessary data; 
     var obj = { 
     // the ID will be needed to store name; 
     ID: data[i].userId, 
     Post: data[i].title, 
     UserName: "" 
     }; 
     var url = "https://jsonplaceholder.typicode.com/users/" + obj.userId; 

     $http.get(url).then(function(response) 
     { 
     // find its entry in the array and add UserName; 
     postList.forEach(function (item) 
     { 
      if (item.ID == response.userId) 
      { 
      // just add the correct key, but I will assume it is `userName` 
      item.UserName = response.userName; 
      // break the loop 
      return item; 
      } 
     }); 

     // increment cleared 
     cleared++; 
     // call allClear 
     allClear(); 
     }); 

     postList.push(obj); 
    } 
    } 
);

。在本节

// var postList = []; 
var postList = {}; 

// instead of pushing we will use the ID as key 
// postList.push(obj); 
postList[obj.ID] = obj;

等：

因为该解决方案包含a loop映射其原始对象的结果，我们实际上可以改变postList为对象，以使它有点快

$http.get(url).then(function(response) 
    { 
    // instead of looking for the item in .forEach 
    postList[response.userId].userName = response.userName; 
    // increment cleared 
    cleared++; 
    // call allClear 
    allClear(); 
    });

希望有帮助。

来源

2017-09-05 00:59:26 masterpreenz

感谢您的解决方案，并按预期工作。@ masterpreenz – 62071072SP

最简单的办法是将用户名添加到用户对象，然后把它推到范围列表时承诺解决

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
    $http.get("https://jsonplaceholder.typicode.com/posts").then(function(response) { 
     $scope.data = response.data; 
     $scope.list = []; 
     for (var i = 0; i < 20; i++) { 

      $http.get("https://jsonplaceholder.typicode.com/users/" + $scope.data[i].userId) 
       .then(function(response) { 
        var user = { 
         UserName: response.data.username, 
         Post: $scope.data[i].title 
        } 
        $scope.list.push(user); 
       }); 
     } 
    }); 
});

来源

2017-09-05 05:53:33

多个API调用

回答

相关问题