多個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調用

回答

相關問題