angularjs - using controller promise when calling service function

Question

I have a base controller into which I inject a service called Uom. I call the service from my controller as follows:

Uom.get_measurement_unit_conversions().then( function( measurement_unit_conversions ) {
    // Do some stuff here
});

and my service looks like...

angular.module('uomService', [])

.factory('Uom', function( $http ) {

return {

    /**
     * Will make a call to the restful API to get the 
     * measurement unit conversions and then return the formatted data.
     *
     * @return {float} Converted value
     */
    get_measurement_unit_conversions: function()
    {
        var conversions = {};

        $http({ method: 'GET', url: '/api/measurement_unit_conversions' })
        .then( function( response ) {

            angular.forEach( response.data.measurement_unit_conversions, function( object, key ) {

                if( conversions.hasOwnProperty( object.source_measurement_unit_id ) == false )
                {
                    conversions[object.source_measurement_unit_id] = {};
                }

                conversions[object.source_measurement_unit_id][object.target_measurement_unit_id] = object.formula;
            });

            return conversions;
        });
    }
}
});

but I keep getting the error

Uom.get_measurement_unit_conversions(...).then is not a function

I took my approach from another stack overflow question

What is the best practice for making an AJAX call in Angular.js?

Any idea what I am doing wrong?

Dan Cohen · Accepted Answer · 2015-11-12 17:56:17Z

There are a couple issues here - first of all, note that your get_measurement_unit_conversions function is not actually returning anything. The return statement is in a then block, but the service function itself is returning undefined. As Charles says, you must return the result from $http(...).

The other issue is that in order for 'promise chaining' to work, you need to return a promise from your then function.

Here is a modified version of the service that should work (beware, untested). Note that I inject the $q service, for use of $q.when() which wraps arbitrary values in a new promise:

angular.module('uomService', [])
.factory('Uom', function( $http, $q ) {

    return {

    /**
     * Will make a call to the restful API to get the 
     * measurement unit conversions and then return the formatted data.
     *
     * @return {float} Converted value
     */
    get_measurement_unit_conversions: function()
    {
        return $http({ method: 'GET', url: '/api/measurement_unit_conversions' })
        .then( function( response ) {
            var conversions = {};
            angular.forEach( response.data.measurement_unit_conversions, function( object, key ) {

                if( conversions.hasOwnProperty( object.source_measurement_unit_id ) == false )
                {
                    conversions[object.source_measurement_unit_id] = {};
                }

                conversions[object.source_measurement_unit_id][object.target_measurement_unit_id] = object.formula;
            });
            return $q.when(conversions);
        });
    }
}
});

your solution worked like a charm. Thank you for taking the time to provide such a good response.

theleebriggs · Accepted Answer · 2015-11-12 17:30:47Z

0

You have to return the $http call as this returns a promise.

return $http(...)

answered Nov 12, 2015 at 17:30

theleebriggs

5813 silver badges6 bronze badges

Collectives™ on Stack Overflow

angularjs - using controller promise when calling service function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related