CODEWITHSUNDEEP
angularjsangularjs-scope
jeffci
jeffci

Reputation: 2622

Passing an argument to a service for use with $http.get()

I've created a service which consumes an API. I need to call this service from my controller with an argument that's passed in from a text input on a form.

myAppServices.factory('apiService', function ($http, $q) {

    return {
        getDocuments: function () {
            return $http.get('/api/documents/', 
                {
                    params: {
                        id: '2' // this should not be hardcoded
                    }
                })
                .then(function (response) {
                    if (typeof response.data == 'object') {
                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }
                }, function (response) {
                    // something went wrong
                    return $q.reject(response.data);
                });
        },
}

My controller looks like this currently...

myApp.controller('homeController', function ($scope, apiService) {

    var docs = function () {
        apiService.getDocuments()
            .then(function (data) {
                $scope.docs = data; //console.log(data);
            }, function (error) {
                // promise rejected ... display generic no data found on table
                console.log('error', error);
            });
    };
}

And my input is simply...

 <input type="text" class="form-control" placeholder="Enter ID" ng-model="id">

How can I get the value entered into this input into my service so that I can return the data based on the ID value put into the text input?

Upvotes: 0

Views: 6093

Answers (3)

Brett
Brett

Reputation: 107

Should be something along these lines:

In your controller

apiService.getDocuments($scope.id).then...

In your service

getDocuments: function (idVar) {
     return $http.get('/api/documents/', 
          {
             params: {
                  id: idVar // this should not be hardcoded
             }
          })

Upvotes: 0

chfumero
chfumero

Reputation: 1147

You need to pass the parameter to the service method, there is some suggestions that you can consider it.

1-) the promise api and the method on your service.

The right way to use the $q is using the deferred object inself. your service could be like. 

myAppServices.factory('apiService', function ($http, $q) {

            return {
                getDocuments: function (id) {

                    var deferred = $q.defer();

                    $http({
                        method: 'GET',
                        url: '/api/documents/',
                        params: {id: id}
                    }).success(function (response) {
                        if (typeof response.data == 'object') {
                            deferred.resolve(response.data);
                        } else {
                            deferred.reject(response.data);
                        }
                    }).error(function (response) {
                        deferred.reject(response.data);
                    });

                    return deferred.promise;
                }
            }
        })

2-) your controller could be like.

myApp.controller('homeController', function ($scope, apiService) {

        $scope.getDocs = function () {
            apiService.getDocuments($scope.id)
                    .then(function (data) {
                        $scope.docs = data; //console.log(data);
                    }, function (error) {
                        // promise rejected ... display generic no data found on table
                        console.log('error', error);
                    });
        };
    });

Upvotes: 2

thedoctor
thedoctor

Reputation: 1518

You can just pass additional parameters in your service definition. Then when you use it in your controller, you can pass additional values.

myAppServices.factory('apiService', function ($http, $q) {
      return {
            getDocuments: function (param1, param2) {

            }

Upvotes: 0

Related Questions