Share service with http data in angularjs

Question

I dont want to do the same http call accross controllers so i want to make a service wich fetches the data and returns data to the controller i tried to do this

the controller:

App.controller('SearchCtrl', function ($scope, $rootScope, $http, $location, ngDialog, Notification, validationSerivce, dataService) {
    $rootScope.pageName = '1-search';
    $scope.type = 'delivery';

    $scope.searchZip = function() {
        //vars
        var zip = $scope.zip;
        var type = $scope.type;

        //check empty zip
        if (typeof zip === "undefined" || zip === null){
            Notification.error({message: "no zipcode entered", delay: 3000});
        } else {
            //validate zip
            if (typeof validationSerivce.validateZip(zip) == "string") {
                Notification.error({message: validationSerivce.validateZip(zip), delay: 3000});
            } else {

                //set spinner and blur
                $scope.setBlur('add');
                $scope.setSpinner('show');

                //get the data
                console.log(dataService.getSearchData(zip,type));
            }
        }
    };
});

and the service looks like this:

App.factory("dataService", function($http) {
    return {
        getSearchData: function(zip,type) {
            //Get request
            $http({
                url: url+"/search?zip=" + zip + "&type=" + type,
                method: 'GET',
                headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
            }).success(function(data){
                return data;
            }).error(function(err){"ERR", console.log(err)});
        }
    };
});

but the return is 'undefined'

the api returns data.... how can i do this the best way?

Think about these: is AJAX synchronous or asynchronous? When is the success callback executed? If returning data from a call to $http was possible, why wouldn't the $http service do it? — JB Nizet
– JB Nizet, Commented Mar 11, 2015 at 20:48

rob · Accepted Answer · 2015-03-11 20:49:49Z

5

There is no return statement in your getSearchData() function. Return the result from $http and access it as a promise. e.g.

dataService.getSearchData(zip,type).then(function(response) {
  console.log(response)
});

answered Mar 11, 2015 at 20:49

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

2 Comments

Ali Murtaza Over a year ago

i have done this but then i get ypeError: Cannot read property 'then' of undefined at Scope.$scope.searchZip (SearchCtrl.js:33) at $parseFunctionCall (angular.js:12345)

rob Over a year ago

that's because your not returning anything from getSearchDate(). Return the result from $http. e.g. return $http(...)

Matan Gubkin · Accepted Answer · 2015-03-11 20:54:50Z

1

try this:

App.factory("dataService", function($http) {
return {
    getSearchData: function(zip,type) {
        //Get request
        return $http({
            url: url+"/search?zip=" + zip + "&type=" + type,
            method: 'GET',
            headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
        }).success(function(data){
            return data;
        }).error(function(err){"ERR", console.log(err)});
    }
};
});

answered Mar 11, 2015 at 20:54

Matan Gubkin

3,2096 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

Share service with http data in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related