How to properly return a promise from an angular service?

Question

I am not getting the array of customers back from the angular service.

Service:

surchargeIndex.service('customerService', [
    "$http", function ($http) {
        this.get = function (customerType) {
            if (customerType == "1") {
                getProduction().then(function (result) { return result.data; });
            } else if (customerType == "2") {
                getTest().then(function (result) { return result.data; });
            } else {
                getAll().then(function (result) { return result.data; });
            }
        }
 var getTest = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetTest",
        })
             .success(function (data) {
                 return data;
             });
    };

    var getProduction = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetProduction",
        })
             .success(function (data) {
                 return data;
             });
    };

    var getAll = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetAll",
        })
             .success(function (data) {
                 return data;
             });
    };

Controller Call:

$scope.getCustomers = function(customerType) {
        $scope.showContent = false;
        $scope.customers = customerService.get(customerType);
    };

HTML:

<div ng-controller="CustomerController" data-ng-init="init()" class="col-md-2">
    <select ng-model="customerKey" ng-options="customer.Key as customer.Value for customer in customers"></select>
</div>

The call is being made to the server every time; however, the select list isn't being populated.

Can you post getProduction(), getTest() and getAll() so we can see what you are returning? If you are wanting to return from this.get() then you can just return the $http method and chain onto it return $http().then()..... something().then().then() — Simon Staton
– Simon Staton, Commented Jan 14, 2015 at 14:17
This is effectively a duplicate of stackoverflow.com/questions/21807592/… -- your problem is that you're binding the promise instead of binding its results, and the solution is to attach your binding code to the returned promise's then handler. — Rytmis
– Rytmis, Commented Jan 14, 2015 at 14:34
@Rytmis I have my code bound to the promise's then handler. I am not sure that question is the same as mine. — Robert
– Robert, Commented Jan 14, 2015 at 15:06

Karthik Easwaran · Accepted Answer · 2015-01-14 16:26:18Z

2

Add the return statement to the CustomerService get method and also remove the success functions which you have written in the getAll(), getProduction(), getTest() methods

surchargeIndex.service('customerService', [
    "$http", function ($http) {
        this.get = function (customerType) {
            var promise;
            if (customerType == "1") {
                promise = getProduction().then(function (result) { return result.data; });
            } else if (customerType == "2") {
                promise = getTest().then(function (result) { return result.data; });
            } else {
                promise = getAll().then(function (result) { return result.data; });
            }
            return promise;
        }
    var getTest = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetTest",
        });

    };

    var getProduction = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetProduction",
        });
    };

    var getAll = function () {
        return $http({
            method: "GET",
            url: "api/Customer/GetAll",
        });
    };

controller

$scope.getCustomers = function(customerType) {
        $scope.showContent = false;
        customerService.get(customerType).then(function(data) {
                         $scope.customers = data;
        });
    };

edited Jan 14, 2015 at 16:26

answered Jan 14, 2015 at 14:26

Karthik Easwaran

5042 silver badges7 bronze badges

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

4 Comments

Robert Over a year ago

This still doesn't populate the select list.

Rytmis Over a year ago

@Robert this edit for the controller code is what I meant above when I said about the then handler.

Robert Over a year ago

@Rytmis so there should be two promises. one in the controller and one in the service?

Rytmis Over a year ago

Think of it this way: in JavaScript, you cannot make an asynchronous api behave as if it were synchronous. In practice, if your service depends on an asynchronous API, it must also expose an asynchronous API. Once you add the return to your get function, your customerSerivice is already returning a promise (in a success case, the promise will be resolved whatever you return in the then handler of the $http request). Take a look at docs.angularjs.org/api/ng/service/$q#chaining-promises for more details.

Simon H · Accepted Answer · 2015-01-14 14:18:44Z

0

Add more returns

surchargeIndex.service('customerService', [
"$http", function ($http) {
    this.get = function (customerType) {
        if (customerType == "1") {
            return getProduction().then(function (result) { return result.data; });
            ^^^^^^
        } else if (customerType == "2") {
            return getTest().then(function (result) { return result.data; });
        } else {
            return getAll().then(function (result) { return result.data; });
        }
    }

answered Jan 14, 2015 at 14:18

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

1 Comment

Robert Over a year ago

The list is not being populated even with the added returns

Collectives™ on Stack Overflow

How to properly return a promise from an angular service?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related