CODEWITHSUNDEEP
javascriptangularjs
Marc Freeman
Marc Freeman

Reputation: 753

Return data from factory to controller after HTTP request AngularJS

I am writing a factory that returns a list of dog breeds from a php file but I can't return the response data to my controller. I have this as a factory 

angular.module('myApp')
    .factory('DataService, function($http) {
        return {
            get_breeds: function() {
                method: 'GET',
                url: 'http://localhost:8080/php/api/getbreeds.php'
            }).then(function onSuccess(response) {
                console.log(response); // responds with 200
                return response.data;
            }).catch(function onError(err) {
                console.log(err);
            })
        }
     }
});

and this is part of my component

angular.module('myApp')
    .component('homeComponent', {
    templateUrl: 'home.component.html,
    controller: function (DataService) {

        DataService.get_breeds()
            .then(function(response) {
                var dog_breeds = response;
                console.log(dog_breeds)
            });
    ...

But I'm not getting anything returned and an error message. Can someone guide me in the right direction?

Upvotes: 2

Views: 1189

Answers (3)

Marc Freeman
Marc Freeman

Reputation: 753

I figured it out not long after I posted the question!

In the end I made a factory that just returned the data from the URL: 

angular.module('myApp')
    .factory('DataService', function($http) {
        return {
            get_dog_breeds: function(urlString) {
                return $http.get(urlString)
        }
    }
})

And then called it in my component's controller like so: 

DataService.get_dog_breeds('http://localhost:8080/php/api/getbreeds.php')
                .then(function (response) {
                    console.log(response.data);
                    $scope.dog_breeds = response.data;
                    return $scope.dog_breeds;
                }).catch(function (error) {
                console.log('Error returned: ' + error
                    + ' Please make sure the service you\'re trying to use exists');
                return false;
            });

And it just worked!

Loving AngularJS so far btw guys :)

Upvotes: 1

Darshuu
Darshuu

Reputation: 511

Try doing this it should work

Use this in your factory

angular.module('myApp')
.factory('DataService', function($http) {
    return {
        get_breeds: function() {
          var request = $http({
            method: 'GET',                            
            url: 'http://localhost:8080/php/api/getbreeds.php'
        });
        return request;
    }
 }
});

and use this in controller to retrieve the data

DataService.get_breeds()
    .then(function(response){
       console.log(response.data);
});

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

Just return the http request from the service

angular.module('myApp')
    .factory('DataService, function($http) {
       var service = this;      
       service.get_breeds = function() {
           return $http.get('http://localhost:8080/php/api/getbreeds.php')
       }
     }
});

Upvotes: 0

Related Questions