How to pass multiple parameters in a URL Angular/REST API

Question

I'm trying to pass multiple parameters in a URL with no luck. I'm not sure if it makes a difference but I am doing it through Angular. I'm trying to send the request to a REST API backend that I know works for single requests. Here is what my backend looks like

index.js

var express = require('express');
var router = express.Router();
var game = require('./game');
router.get('/api/v1/gameRefined/:from_datepicker:to_datepicker:from_timepicker:to_timepicker:selectLevel', game.getAllRefined);
module.exports = router;

game.js

...dbconnection stuff...
var game={
getAllRefined: function(req, res) {
    var refines = req.params;
    console.log("getting refined games");
    pool.getConnection(function(err, connection){
    var query = connection.query('SELECT * FROM game WHERE date >= ? AND date <= ? AND time >= ? AND time <= ? and level = ?', [refines.from_datepicker, refines.to_datepicker, refines.from_timepicker, refines.to_timepicker, refines.selectLevel], function(err, rows) {
      connection.release();
if(err) {
  throw err;
}else{
  res.json(rows);
    }
  });
})
  },
}
module.exports = game;

I send the request from this factory

.factory('gameFactory', ['$http',
function($http) {
var _gameFactory = {};
_gameFactory.getRefinedGames = function(dateFrom,dateTo,timeFrom,timeTo,level) {
  var encodedParam = encodeURIComponent(baseUrl + '/api/v1/gameRefined/?from_datepicker='+dateFrom+'&to_datepicker='+dateTo+'&from_timepicker='+timeFrom+'&to_timepicker='+timeTo+'&selectLevel='+level+'');
  return $http.get(encodedParam);
}

return _gameFactory;
}])

That sends this request that comes back as a 404: http://localhost:8100/http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fv1%2FgameRefined%2F%3Ffrom_datepicker%3D2015-02-05%26to_datepicker%3D2015-02-19%26from_timepicker%3D12%3A00%26to_timepicker%3D18%3A00%26selectLevel%3D1

I have tried it encoded and not encoded, with forward slashs, with semi colons, but nothing has worked so far. I don't know why a localhost gets appended at the start, but even trying it in postman without the first localhost still is a 404 error.

How should I be doing this? Any help is appreciated. Thank you.

Answer 1

First, other than separating the work into a factory, you aren't really using Angular here. Second, I would consider posting to your API, return JSON results from the API, and then use a promise to read the data back into Angular.

1. Use $http.post

Let Angular do this work for you. Something like the below will generate the URL request for you. The return value of $http is also a promise , so using .success and .error will allow you to parse any returned data as well, even if it is just a success or failure message - but it is a great method of passing data between server/API and client.

.factory('gameFactory', ['$http',
  function($http) {
    return {
      reachAPI: function(dateFrom, dateTo) {
        $http.post('http://localhost:8080/api/v1', {
          'dateFrom': dateFrom,
          'dateTo': dateTo
        })
        .success(function(data, status, headers, config) {
          *things happen*
          data.somethingReturned // from your API
          });
        }
}]);

2. Consider body-parser

I know you said you have confidence in your REST API structure, but body-parser is an Express middleware that can parse URL-encoded strings and may prove helpful in reading your data. Personally, I think it lends towards more readable code.

var app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
router.route('/api').post(function(req, res) {
  *things happen*
  req.body.dateFrom //find your data
  *things happen*
  res.json(returnedData);
});

Hope that helps