Return data from factory to controller after HTTP request AngularJS

Question

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?

Not sure if you copy and pasted incorrectly, but this line templateUrl: 'home.component.html, is missing a closing single-quote — user2340824
– user2340824, Commented Aug 15, 2017 at 18:33
Did you mean to return a Promise in getBreeds? The function doesn't looks right, the syntax highlighter is also confused. OR Where are you using injected $http in getBreeds? — sabithpocker
– sabithpocker, Commented Aug 15, 2017 at 18:37

tremendows · Accepted Answer · 2018-05-03 12:31:24Z

1

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 :)

edited May 3, 2018 at 12:31

tremendows

4,4323 gold badges38 silver badges56 bronze badges

answered Aug 29, 2017 at 16:28

Marc Freeman

7732 gold badges9 silver badges35 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-08-15 18:34:07Z

0

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

answered Aug 15, 2017 at 18:34

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Marc Freeman Over a year ago

I figured this out not long after I posted! In the end I came up with this : angular.module('myApp')

Darshuu · Accepted Answer · 2018-02-15 11:48:25Z

0

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

answered Feb 15, 2018 at 11:48

Darshuu

5115 silver badges9 bronze badges

Collectives™ on Stack Overflow

Return data from factory to controller after HTTP request AngularJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related