How to do a $http GET with some data in AngularJS?

Question

I want to make a Get request to my Backend, but I want to verify some user credentials before sending the response object.

Here is my code:

$scope.getEverything = function (){
    $http.get('http://localhost:1234/things').success(function(data){
        $scope.things = data;
    });
};

I've tried the same code with the following syntax:

$http.method('path).then
$http.method(config)

And I just could not figure out how to pass in some data. Trying to use params:data as the config object with print out:

GET http://localhost:1234/[object%20Object] 404 (Not Found)

On the console.

The AngularJS Docs don't say a word about sending data with GET requests. I've also tried some answers of Stack, but most of then are outdated and just won't work.

Can I send data with GET request or this is just one design error of my application?

ggorlen · Accepted Answer · 2023-04-28 22:45:18Z

9

You're most likely going to need to use a POST method instead of a GET method.

But to do it with a GET method:

From AngularJS passing data to $http.get request:

A HTTP GET request can't contain data to be posted to the server. However you can add a query string to the request.

angular.http provides an option for it params.

$http({
     url: user.details_path, 
     method: "GET",
     params: {user_id: user.id}  
});

And using AngularJS to POST instead:

$http.post('/someUrl', {msg:'hello word!'}).
  then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

edited Apr 28, 2023 at 22:45

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Aug 24, 2015 at 20:54

Wyetro

8,5889 gold badges50 silver badges65 bronze badges

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

8 Comments

charlietfl Over a year ago

why are you injecting jQuery $.ajax into an angular question? angular has it's own ajax api

Wyetro Over a year ago

I included both for clarity

Alfonso Presa Over a year ago

I don't think jquery should be used directly if AngularJS is in place, as that will force to use $scope.$apply and also will break the testability of angular (making Protractor stop waiting for the request to end)

Wyetro Over a year ago

I modified it so that it is 100% Angular

Rodmentou Over a year ago

Ok, I'm going with POST requests. I'm using Node with Express and I have already tried using POST requests to GET filtered data based on the req.body. Then, I'm using res.json(obj) to get data back on client. Thank you. I was just hoping to use the 'correct' word of method.

|

charlietfl · Accepted Answer · 2015-08-24 20:59:15Z

3

For $http.get requests use the params property of the config object

$http.get(url, {params:{ foo:'bar'}}).then(func....

See the Arguments table in Usage section of $http docs

answered Aug 24, 2015 at 20:59

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

ggorlen · Accepted Answer · 2023-04-29 14:40:50Z

2

If you want to pass some data when using the GET method you can pass a params option on the get method of the $http service. This will be urlencoded parameters.

$http.get(url, {
  params: {
    query: 'hello world'
  }
}

or

$http({
   url: url,
   method:'GET',
   params: {
     query:'Hello World'
   }
})

But, the http standards define the POST method to send data to the server. The GET is just to obtain data from it. In Angular the POST method looks like:

$http({
  url: url,
  method:'POST',
  data: {
    query: 'Hello World'
  }
})

Check the official docs for GET and POST

edited Apr 29, 2023 at 14:40

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Aug 24, 2015 at 21:00

chfumero

1,1572 gold badges15 silver badges28 bronze badges

2 Comments

Rodmentou Over a year ago

Thank you. But I don't want to use query params. :/ I'm going with POST. Thanks.

chfumero Over a year ago

Post is the rigth way to send data to the server, the get params is data that is append it to the url of the request. exp: url?query=helloworld&otherparam=23. It purpose is to refine the request options. Not send data to the server.

Alfonso Presa · Accepted Answer · 2015-08-24 20:56:17Z

1

Try

var req = {
 method: 'GET',
 url: 'http://localhost:1234/things',
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

answered Aug 24, 2015 at 20:56

Alfonso Presa

1,0347 silver badges11 bronze badges

Comments

Mahmoud Abdelsattar · Accepted Answer · 2021-03-27 15:53:39Z

0

As @charlietfl mentioned, according to the docs you can do this to implement download loaded/total progress:

 $http.get(url,  {
     eventHandlers: {
         'progress': function(evt) {
             $window.console.log(evt.loaded + '/' + evt.total);
         }
     }
  }).then(function(response) { ...

edited Mar 27, 2021 at 15:53

Mahmoud Abdelsattar

1,5471 gold badge20 silver badges36 bronze badges

answered Mar 27, 2021 at 9:11

Alexey Volkov

11 bronze badge

Collectives™ on Stack Overflow

How to do a $http GET with some data in AngularJS?

5 Answers 5

8 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related