使用angularjs使用Restful API时如何获取多个$ http

Question

I try to get from JSONPlaceholder data to display, and I need more than one $http.get , this is my code. The problem is, that from the second call I don't get any data

  MyAlbum1.controller('albumList', function($scope, $http) {
    $http.get('http://jsonplaceholder.typicode.com/albums').
        then(function(response) {
            $scope.albumDetails = response.data;
        });

    $http.get('http://jsonplaceholder.typicode.com/users').
        then(function(response) {
            $scope.albumUsers = response.data;
       });
});

If I try for example to display in the partial view albumUsers.name it will not display. Only if I put first the $http.get('http://jsonplaceholder.typicode.com/users'). but then it will not display the albumDetails.id

So how do I get more than one http.get ?

Thanks

Answer 1

You could load 1 after another:

MyAlbum1.controller('albumList', function($scope, $http) {

     $http.get('http://jsonplaceholder.typicode.com/albums').
     then(function(response) {
        $scope.albumDetails = response.data;


        $http.get('http://jsonplaceholder.typicode.com/users').
        then(function(response) {
                $scope.albumUsers = response.data;
        });
    });
});

or

  MyAlbum1.controller('albumList', function($scope, $http, $q) {
       $q.all([$http.get('http://jsonplaceholder.typicode.com/albums'), $http.get('http://jsonplaceholder.typicode.com/users')]).then(function(response) { 
       });
  });

Answer 2

use $q to send multiple requests at once.first inject the $q to controller.

MyAlbum1.controller('albumList', function($scope, $http,$q) {    

    $q.all(['http://jsonplaceholder.typicode.com/albums','http://jsonplaceholder.typicode.com/users',]).then(function(response){
         $scope.albumDetails = response[0].data;
         $scope.albumUsers= response[1].data;
    })    
})

Answer 3

Thanks! Work now. Here's the code I'm using:

MyAlbum.controller('albumList', function($scope, $http, $q) {
$http.get('http://jsonplaceholder.typicode.com/albums').
    then(function(response) {
        $scope.albumDetails = response.data;
    });

$http.get('http://jsonplaceholder.typicode.com/users').
    then(function(response) {
        $scope.albumUsers = response.data;
   });

$q.all(['http://jsonplaceholder.typicode.com/albums','http://jsonplaceholder.typicode.com/users',]).
    then(function(response){
        $scope.albumDetails = response[0].data;
        $scope.albumUsers= response[1].data;
});  

});

But, when call the data, I need to do as follow:

User: {{albumUsers[1].name}}

Like, I need the [1] in order that it will work. Thanks