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 mand!");
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.

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 mand!");
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.

• javascript
• angularjs
• http
• express
• mean-stack

Share Improve this question Follow edited Jul 23, 2015 at 12:32 Dayan 8,0511111 gold badges5252 silver badges7878 bronze badges asked Jul 23, 2015 at 12:06 HarryHarry 32311 gold badge55 silver badges1212 bronze badges 1

• 1 why are you sending the request after changing your location ? – Ahmed Eid Commented Jul 23, 2015 at 12:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 mand!");
console.log(req.query); });

Thanks for the help guys!

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.

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" />