Get Data from AngularJS HTTP post call in controller from factory

Question

I'm posting data to a a Python API and the API response returns data that I want to use in a controller and eventually in one in HTML partial associated with that view. I'm able to successfully get the data as i'm logging the response.data from the call but when I call the method from my controler, I get an error stating cannot read property of "then" undefined.

 function getCustomerGraphData(payload, config) {

        var data = {
            user_selection: JSON.stringify(payload),
            index_info: JSON.stringify(config.index_info),
            column_config: JSON.stringify(config.Results)
        };

        console.log("data", data);

        $http({
            url: 'URL',
            method: "POST",
            data: $.param(data),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function(response) {
            var customer = response.data;

            console.log("data", customer);

            return customer;
        });

    }

Service

 arisService.getCustomerGraphData()
        .then(function(data){
            $scope.overIndexData = data;
        })

Controller

score 1 · Accepted Answer · answered Feb 03 '16 at 16:27

make sure your service is returning a promise so you can call it's then method, look at the documentation for $q for more information on promises :

function getCustomerGraphData(payload, config, $q) {
   // initialize the defer object
   var deferred = $q.defer();

    var data = {
        user_selection: JSON.stringify(payload),
        index_info: JSON.stringify(config.index_info),
        column_config: JSON.stringify(config.Results)
    };

    console.log("data", data);

    $http({
        url: 'URL',
        method: "POST",
        data: $.param(data),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function(response) {
        var customer = response.data;

        console.log("data", customer);

        // resolve the promise with your data
        deferred.resolve(customer);
    });

    // return the promise
    return deferred.promise;

}

awesome! and if I have multiple methods, I can declare the q.defer as a global variable and use it throughout the service? — Anish S., Feb 03 '16 at 16:49
if you are talking about dealing with multiple promises I'd recommend checking out $q.all, you can pass it an array of promises and it'll return a promise that resolves when all the promises you pass it resolve. — paul trone, Feb 03 '16 at 17:01

score 0 · Answer 2 · edited May 23 '17 at 12:00

Into you service you should return the promise create by the http call.

return $http(...)

Then you will have a promise with callback accessible into your controller like you want.

You may want to read something about promises if you are starting with angular, as they are frequently used.

Angular factory returning a promise

http://weblog.west-wind.com/posts/2014/Oct/24/AngularJs-and-Promises-with-the-http-Service

Processing $http response in service

Angular docs about $q service

score 0 · Answer 3 · answered Feb 03 '16 at 16:29

Inject $q as dependency inside factory and then promisify your method,

function getCustomerGraphData(payload, config) {
        var deferred = $q.defer();
        var data = {
            user_selection: JSON.stringify(payload),
            index_info: JSON.stringify(config.index_info),
            column_config: JSON.stringify(config.Results)
        };

        console.log("data", data);

        $http({
            url: 'URL',
            method: "POST",
            data: $.param(data),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function(response) {
            var customer = response.data;
            deferred.resolve(customer);
            console.log("data", customer);

            return customer;
        });
      return deferred.promise;
    }

Get Data from AngularJS HTTP post call in controller from factory

3 Answers3