8

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?

1
  • Are they path/query params? Commented Sep 26, 2015 at 16:05

4 Answers 4

14

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.

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

1 Comment

This is fantastic! Thanks for this.
3

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;
    })
})

Comments

2

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
});

Comments

1

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
});

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.