passing data using AngularJS $http.get method

Question

I'm building an application using the MEAN stack that would make use of data retrieved from an external API. As a measure to hide the API key, I want to make the API request from the server, however I am having problems passing the search term from the Angular front-end to the server.

The code below is part of the Angular controller, which should pass the request to the server with the search term:

myApp.controller('mainController', ['$scope','$http', '$location', function($scope, $http, $location){
        $scope.submit = function(){
        $location.path('/results');
        $http({method: 'GET', url: '/makeSearch', data: {term: $scope.term} });
    }
}]);

and then the following server code would parse the request using the body-parser middleware:

app.get('/makeSearch', function(req, res) {
console.log("I received a command!");
console.log(req.body); });

However once I try to pass/submit a search term from the front-end, I get only an empty object on the server console. Any tips on what I'm doing wrong? Any help would be appreciated.

why are you sending the request after changing your location ? — Ahmed Eid, Jul 23 '15 at 12:09

score 3 · Answer 1 · answered Jul 23 '15 at 15:10

I figured it out! @Rikky made a good point that the body of a http get request (req.body) is always empty. So by logging just the req to the console, I worked out how the search term can be sent using the GET method

Using params instead of data in the request within the AngularJS controller show in the code below:

revApp.controller('mainController', ['$scope','$http', '$location', function($scope, $http, $location){

$scope.submit = function(){
    console.log($scope.term);
    $location.path('/results');
    $http({method: 'GET',
        url: '/makeSearch',
        params: {term: $scope.term}
    });
} }]);

and on the server, logging req.query instead of req.body as shown in the code below:

app.get('/makeSearch', function(req, res) {
console.log("I received a command!");
console.log(req.query); });

Thanks for the help guys!

score 2 · Answer 2 · edited May 23 '17 at 12:17

There are some http basic that you should know first, then you'll know what you are doing, then, you'll know how to do it right:

With HTTP GET method means querying for data, not sending data. Because of that, an HTTP request with GET method will not have body, so

request.body

will always be empty.

If you really want to send some data to the server, using POST is preferred.
If you still want to send data to the server via get, using query string is the best option. You can check it out at this question
If you want to send some data to the server via get method, but you don't want using query string, you can do some hack with http header instead of http body.

score 0 · Answer 3 · answered Jul 23 '15 at 12:22

0

Make sure you have a term property in your scope.

myApp.controller('mainController', ['$scope','$http', '$location', function($scope, $http, $location){

        $scope.term ='';

        $scope.submit = function(){
           $location.path('/results');
            $http({method: 'GET', url: '/makeSearch', data: {term:    $scope.term} 
            });
     }
}]);

Make sure that your UI has an element which is bound to the term property of your scope

<input type="text" ng-model="term" />

answered Jul 23 '15 at 12:22

Shyju

214,206
104
411
497

Wouldn't that `$location.path('/results')';` cause a problem? Since its being executed right before the `GET`. – Dayan Jul 23 '15 at 12:23
@Dayan, I've commented that out but it still doesn't work – Harry Jul 23 '15 at 12:26
@Shiyu, I already have my input bound to the term property, and I've also added the `$scope.term = '' ` but it still logs an empty object. – Harry Jul 23 '15 at 12:28

passing data using AngularJS $http.get method

3 Answers3