Angular JS return data from service and Http callback Method

Question

Created a Angular JS service, which sends request to the server for the JSON data. I am able to receive the data correctly in the service, but i am unable to return data to the controller. Please check as follows:

<!DOCTYPE html>
<html>
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

<br><br><br><br><br><br><br><br><br>
<p>The content is {{content}}</p>
</div>

<script>
var app = angular.module('myApp', []);

app.service('MyService', function($http) {
    this.sendRequest = function() {
    	$http({
		  method: 'GET',
		  url: 'http://localhost:3000/json'
		}).then(
			function successCallback(response) {
				console.dir('This is the response');
			    console.dir(response);
			    return response;
			}, function errorCallback(response) {
			    console.dir('This is the error');
			    console.dir(response);
			    return response;
	  		}
	  	);
    };
    this.addition = function(a,b) {
    	return a+b;
    }; 
});

app.controller('myCtrl', function($scope, MyService) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    console.dir(MyService.addition(4,5));
    var a = MyService.sendRequest();
    console.dir("Main program " + a);
    $scope.content = a;
});
</script>

</body>
</html>

For the addition function, i am able to get data correctly (I mean, it is returning sum of 4+5), but coming to the "sendRequest" method, it is invoking the $http call in this method and getting back to the caller "null/empty" data without waiting for the $http method.

Problem is, $http call in the "sendRequest" method is asynchronous (I mean, "then" is called once it is getting the response from the server) and i want to wait for the server response and send response to the caller.

sendRequest doesn't return anything... You can return a promise and handle it in the controller. — elclanrs
– elclanrs, Commented Jan 27, 2016 at 3:56
@elclanrs do you mean like this, return $http({ method: 'GET', url: 'localhost:3000/json' }); — user3278897
– user3278897, Commented Jan 27, 2016 at 3:57
Yes, then in the controller do the .then and inside do $scope.content = — elclanrs
– elclanrs, Commented Jan 27, 2016 at 3:58
@elclanrs I tried that, it is working, but i want the service to gather the response and send it back to the caller (I didn't want to return promise for each and every call, then write success and error methods for each call). Is their any other way. — user3278897
– user3278897, Commented Jan 27, 2016 at 4:05
@user3278897 no, that's the way to work with async tasks, by now. You can take a look at async and await on ES7 but just for curiosity. — Miguel Lattuada
– Miguel Lattuada, Commented Jan 27, 2016 at 4:10

Abhilash Augustine · Accepted Answer · 2016-01-27 04:11:26Z

1

Your service should be look like this,

app.service('MyService', function($http) {
    this.sendRequest = function() {
        // You should return $http's result
        // $http will return a promise
        return $http({
          method: 'GET',
          url: 'http://localhost:3000/json'
        }).then(
            function successCallback(response) {
                console.dir('This is the response');
                console.dir(response);
                return response.data;
            }, function errorCallback(response) {
                console.dir('This is the error');
                console.dir(response);
                return response;
            }
        );
    };
    this.addition = function(a,b) {
        return a+b;
    }; 
});

Now modify your controller like this,

app.controller('myCtrl', function($scope, MyService) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    console.dir(MyService.addition(4,5));
    MyService.sendRequest().then(function success(data){
       // here you will get your server data
       var a = data;
    }, function error(){

    });
    console.dir("Main program " + a);
    $scope.content = a;
});

answered Jan 27, 2016 at 4:11

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

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

3 Comments

Phil Over a year ago

It's worth pointing out that the errorCallback will result in a resolved (successful) promise. It should be return $q.reject(response)

user3278897 Over a year ago

@Abhilash then what is the need of callback functions two times, i mean, why you are using "then" two times, once in the service and other time near the caller. Cannot we just return the return $http({ method: 'GET', url: 'localhost:3000/json' }) and write the then function once. More over, as i said in the comment that i already tried this and working fine by taking the advice of the elclanrs.

georgeawg Over a year ago

@Phil is right. In your errorCallback you are converting a rejected promise to a fulfilled promise. In errorCallback you should either throw response; or return $q.reject(response).

Collectives™ on Stack Overflow

Angular JS return data from service and Http callback Method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related