CODEWITHSUNDEEP
javascriptangularjs
Robert
Robert

Reputation: 4406

How to return a value from a service in angular js?

I know that the data is coming from the server (I have unit tests and have seen the data in the debugger in chrome) but I can't figure out how to return the data from the angular service to the angular controller.

Service:

UPDATED

surchargeIndex.service('customerService', [
'$http', function ($http) {
    this.getTest = function () {
       return $http({
                method: "GET",
                url: "api/Customer/GetTest",
            })
            .success(function(data) {
                return data;
            });
    };
}

]);

Controller:

surchargeIndex.controller('SurchargeIndexController', function ($scope, customerService, templateService) {
    $scope.customers = customerService.getTest();

});

Data has the array from the server so the array is populated in the service. So to reiterate the data is there; however, I receive a 404 error INSIDE of the success handler during debugging.

What am I missing?

Upvotes: 0

Views: 203

Answers (2)

Dennis Weidmann
Dennis Weidmann

Reputation: 1967

You need to define a Callback to get your data "back" to your controller, after an async http call... There are different ways to do... I will show you one way without a callback, or a promise, but the best way would be to use a callback, or promise...

Wild West Way:

app.controller('myCTRL', function($scope, myService) {

       $scope.valueWanted = myService.valueWanted;
       myService.getData();

});

app.service('myService', function($http) {

       var myThis = this;

       this.valueWanted = "";
       this.getData = function () {
              $http.get('api/Customer/GetTest').success(function (data) {
                     myThis.valueWanted = data.valueWanted;
              });
       };

});

Upvotes: 0

cubbuk
cubbuk

Reputation: 7920

$http works asynchronously; fortunately it returns a promise which will be fulfilled when the response retrieved from the server. So you should return $http's get method and use returned promise to handle data.

this.getTest = function () {
        return $http({
                method: "GET",
                url: "api/Customer/GetTest",
            })
            .success(function(data) {
                return data;
            })
            .error(function() {
                alert("failed");
        }); // This returns a promise

    };

Then in your controller you should use that promise to retrieve the expected data.

surchargeIndex.controller('SurchargeIndexController', function ($scope, customerService, templateService) {
    //Use the returned promise to handle data, first parameter of the promise is used for successful result, if error happens, second parameter of the promise returns the error and you can do your error handling in that function
    customerService.getTest().then(function(customers){$scope.customers = customers;},   function(err){console.error(err);})
});

Upvotes: 3

Related Questions