How to get multiple $http when Consume Restful APIs with angularjs

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

tomek550 · Accepted Answer · 2017-05-16 07:27:23Z

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

edited May 16, 2017 at 7:27

answered May 16, 2017 at 7:21

tomek550

4704 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2017-05-16 07:19:49Z

0

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

answered May 16, 2017 at 7:19

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Menahem Gil · Accepted Answer · 2017-05-16 17:39:54Z

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

Collectives™ on Stack Overflow

How to get multiple $http when Consume Restful APIs with angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related