Angular: Pass params to $http.get

Question

I'm trying to pass a params object to the $http.get() service. My params look like this:

var params = {
  one: value,
  two: value
}

And I'm trying to pass them into my function like so:

$http.get('/someUrl', params)
.success(function(data) {
   // stuff
})
.error(function(data) {
   // error stuff
});

Is this the correct way to go about doing this?

Solution 1

The second argument of $http is a config object (see documentation). Amongst other properties, the config object accepts a params property:

• params – {Object.<string|Object>} – Map of strings or objects which will be serialized with the paramSerializer and appended as GET parameters.

Therefore you have to pass the parameters as such

var config = {
    params: {
        one: value,
        two: value
    }
}

$http.get('/someUrl', config).then(...)

Suppose the values for the parameters are respectively '1' and '2', $http will send a GET request to the following url:

/someUrl?one=1&two=2

As a side note, try to avoid using success and error functions on $http. They have been deprecated as of angular 1.4.4. Use the methods then with a success and an error callback instead, or then with only a success callback and catch.

Solution 2

Service/Factory

For the actual call use a factory or service that you can inject to the controllers you need it in. This is an example factory passing parameters

.factory('Chats', function ($http, $rootScope, $stateParams) {
  return {
      all: function () {
          return $http.get('http://ip_address_or_url:3000/chats', { params: { user_id: $rootScope.session } })
      }
  };
});

Controller

In your controller you use the service like this

.controller('ChatsCtrl', function ($scope, Chats) {
    Chats.all().success(function (response) {
        $scope.chats = response;
    })
})

Solution 3

I have faced similar issue in recent time and I had to add few additional details to request (I used accepted answer with some headers):

$http.get(url, {
    params: {
        paramOne: valueOne,
        paramTwo: valueTwo,
        ...
    },
    headers: {
        'key': 'value'
    },
    // responseType was required in my case as I was basically
    // retrieving PDf document using this REST endpoint
    // This is not required in your case, 
    // keeping it for somebody else's reference
    responseType: 'arraybuffer'
}).success(
    function(data, status, headers, config) {
        // do some stuff here with data
    }).error(function(data) {
        // do some stuff here with data
});

Solution 4

The $http documentation suggest that the second argument to the $http.get method is an object which you can pass with it "param" object.

Try something like this:

$http.get('/someUrl', {params: params})
.success(function(data) {
   // stuff
})
.error(function(data) {
   // error stuff
});

View more solutions

Comments

[realph]

This is fantastic! Thanks for this.