Mehrere api Anrufe AngularJS

Question

Ich bin ziemlich neu in AngularJS und ich bin praktizierender unten Übung mit Anforderung

1.Using mithilfe der API 20 Beiträge zu erhalten und sie auf der Seite angezeigt werden zusammen mit dem Namen des Benutzers, der die erstellt posten und zeigen sie auf der Seite an. Für diese Übung verwende ich https://jsonplaceholder.typicode.com/ als Datenquelle. Ich brauche 2 api Anrufe in demselben Controller zu tun

1. Um Liste von 20 Stellen, die Benutzer-ID in das (https://jsonplaceholder.typicode.com/posts)

2. Basierend auf den oben Benutzer-ID zu bekommen Ich brauche Benutzernamen hat (https://jsonplaceholder.typicode.com/users/userId) Bitte sehen Sie meine Arbeit in PLNKR gemacht, kann ich Post, aber nicht Benutzernamen anzeigen.

   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> 
   

Answer 1

Ich glaube, dieser Bereich ist falsch:

.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; 
}); 

, in der Sie eine Promise object in IhrerEigenschaft gespeichert haben und unerwartetes Ergebnis produziert haben.

zu korrigieren, die postList zuweisen, nachdem die Anforderung beendet hat:

.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; 
}); 

begegnen Sobald Sie dies implementiert ein neues Problem:

da Sie $http.get() in einer Schleife aufgerufen und verwendet tatsächlich die Variable i innerhalb von der Zeit führt den Wert von i ist bereits in seiner endgültigen Form, die i = 20 | data.length ist, die alle Anrufe erhalten wird.

, um dieses Problem zu dem besten Weg zu überwinden ich weiß, ist, die gesamten Daten vor der Anzeige zunächst formatiert werden:

$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); 
    } 
    } 
); 

auf diese Weise sind wir sicher, dass die Daten, die sie in der Ansicht vor der Anzeige abgeschlossen sind .

wie diese Lösung a loop enthält das Ergebnis mit dem ursprünglichen Objekt abzubilden, können wir tatsächlich postList als ein Objekt ändern, um es ein wenig schneller zu machen:

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

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

und so in diesem Abschnitt:

$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(); 
    }); 

hoffe das hilft.

Answer 2

Die einfache Lösung wäre es, den Benutzernamen auf das Benutzerobjekt hinzufügen und sie dann an die Bereichsliste schieben, wenn das Versprechen

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); 
       }); 
     } 
    }); 
});