How to pass client-side parameters to the server-s

Question

Probably a very basic question, but I cannot seem to find a simple answer.

I have a GET method leveraging Angular's $http that is requesting a promise from a particular url (URL_OF_INTEREST).

On this server, I run an express script server.js script that can handle GET requests.

server.js

var express    = require('express');        // call express
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');
var stripe     = require("stripe")("CUSTOM_TEST_TOKEN");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.PORT || 8080;        
var router = express.Router();              // get an instance of the express Router

router.get('/', function(req, res, next) {

    var stripeToken = "CUSTOM_PAYMENT_TOKEN";

    var charge = stripe.charges.create({
        amount: 1100, // amount in cents, again
        currency: "usd",
        source: stripeToken,
        description: "Example charge"
    }, function(err, charge) {
        if (err && err.type === 'StripeCardError') {
            res.json(err);   
        } else {
            res.json(charge);   
        }
    });
});

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    next();
})

app.use('/api', router); // register our route
app.listen(port); // start our server
console.log('Magic happens on port ' + port);

I can communicate with the URL_OF_INTEREST using an Angular GET method as follows:

$http.get('URL_OF_INTEREST')
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });

However, the fields amount, currency, source and description need to be ideally passed on from the Angular client side application.

How can this be achieved and how can my express application read this data?

Answer 1

You need to pass the data in your get call as folow:

var data = {
    amount: 3,
    currency: 2,
    source: 3,
    description: 4
};

$http.get('URL_OF_INTEREST', data) // PASS THE DATA AS THE SECOND PARAMETER
    .success(
        function(success){
            console.log(success)
        })
    .error(
        function(error){
            console.log(error)
        });

And in your backend, you can get your url parameters as folow:

router.get('/', function(req, res, next) {

    var amount = req.query.amount; // GET THE AMOUNT FROM THE GET REQUEST

    var stripeToken = "CUSTOM_PAYMENT_TOKEN";

    var charge = stripe.charges.create({
        amount: 1100, // amount in cents, again
        currency: "usd",
        source: stripeToken,
        description: "Example charge"
    }, function(err, charge) {
        if (err && err.type === 'StripeCardError') {
            res.json(err);   
        } else {
            res.json(charge);   
        }
    });
});

Answer 2

You can create a JS object with your parameters, and then use jQuery's $.param (http://api.jquery.com/jquery.param/) to easily serialize them into a URL query string:

var parameters = {
   amount: 123,
   description: 'test'
};

And on your $http call:

$http.get('URL_OF_INTEREST'+'?'+$.param(parameters))
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });

EDIT: OR if you don't want to use jQuery:

$http.get('URL_OF_INTEREST', { params: parameters })
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });

On server-side, just use the req object to get the parameters:

var amount = req.query.amount;
var description = req.query.description;

Answer 3

Answer vs Good Solution

• HTTP POST is preferred while sending data to the server.

• HTTP GET method means querying for data, not sending data. Because of that, an HTTP request with GET method will always have request.body empty. But still data can be sent to server via GET using query string. In your case:

Client

$http.get('url_to_be_hit', { name : 'Mr. X'})
    .success(function(res){ //response })
    .error(function(err){ //failure });

Server

app.get('/url_to_be_hit', function(req,res,next){
   //req.query.name
}); 

Happy Helping!

Answer 4

HTTP GET method

Client:

$http.get('/login', {params: {name: 'ABCXYZ'}})
    .success(
        function(success){
            console.log(success)
        })
    .error(
        function(error){
            console.log(error)
        });

Server:

router.get('/login', function(req, res, next) {
    var username = req.query.name;
    res.json({'status': 200, 'msg': 'success'});
}

HTTP POST method

Client:

$http.post('/login', {params: {name: 'ABCXYZ'}})
    .success(
        function(success){
            console.log(success)
        })
    .error(
        function(error){
            console.log(error)
        });

Server:

router.post('/login', function(req, res, next) {
    var username = req.body.params.name;
    res.json({'status': 200, 'msg': 'success'});
}