CODEWITHSUNDEEP
javascriptangularjshttpexpressmean-stack
Harry
Harry

Reputation: 325

passing data using AngularJS $http.get method

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.

Upvotes: 0

Views: 9717

Answers (3)

Harry
Harry

Reputation: 325

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!

Upvotes: 3

Rikky
Rikky

Reputation: 515

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.

Upvotes: 2

Shyju
Shyju

Reputation: 218812

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

Upvotes: 0

Related Questions