DBoonz DBoonz - 29 days ago 8
JSON Question

Restangular not setting headers on post

I am trying to set the header for a single post request using restangular but the request is being sent as plain text instead of json.
I have read the documentation here as well as a similar question.
I have followed the prescribed methods but to no avail.

On the server side am using Express 4.x and communicating with Mongodb using an ORM called Moongoose.

Server side: server.js using express.js 4.0

'use strict';

var express = require('express'),
morgan = require('morgan'),
port =process.env.PORT || 3000,
bodyParser = require('body-parser'),
methodOverride = require('method-override'),
app = express();


app.use(morgan('dev'));
app.use(bodyParser());
app.use(methodOverride());
app.use(express.static(__dirname+"/app"));

require('./config/models');
require('./config/user_ctrl');
require('./config/comt_ctrl');
require('./config/routes')(app);

app.listen(port);
console.log('Magic happens on port: '+port);

//Server side: routes.js
var pips = require('./user_ctrl');

module.exports = function(app){

app.get('/api/pipplez',pips.getPipplez); //Gets all users in collection
app.post('/api/pipplez/wan',pips.getPipplezById); //Gets the specified user

app.all('/api/*', function(req, res) {
res.send(404);
});

app.get('/*', function(req, res){
res.send('index.html');
});
};


On the client side I have this.

Client side: app.js after config

.factory('userServ',function(Restangular){

var ol = Restangular.withConfig(function(conf){
conf.setBaseUrl('/api/')
});

var an = Restangular.withConfig(function(conf){
conf.setBaseUrl('/api/users/')
});
return{
oldem: ol.one('users').getList(),
wandem: an.one('one')
}
});


Client side: userCtr.js

'use strict';

ting.controller('userCtrl', function($scope, userServ){

$scope.pip = {
name: ''
};

$scope.getOlPips = function(){

userServ.oldem.then(function(rez){

if(rez!=='null'){
$scope.dem = rez;
console.log($scope.dem);
}
}, function(err){
console.log('Error!!!\n', err );
})
};

$scope.getWanPip = function(pip){
//console.log(pip);
RestServ.wandem.post(pip, {}, {'Content-Type':'application/json'}).then(function(res){
console.log(res)
}, function(err){
console.log('Error!!!\n', err);
})
};

$scope.getOlUzas();
});


part of the html

<form>
<input ng-model='pip.unm' maxlength= '20' placeholder='Search for user...'>
<button class="btn btn-primary" ng-click = 'getWanPip(pip)'>Find</button>
</form>


I have extensively tested the back end using postman. The back end is functioning. The application is able to get all the records from the database however when I make the post request I get a 404 because the format of the request is sent as plain text instead of json. How can I get this to work?

Answer Source

After groping around the web, I found that restangular sends form data to the server in json format by default. I was misguided by the developer tools from chrome. In order to disect http requests I recommend fiddler If one wants to format the header in restangular being sent as a request from the form you can do the following:

//From the previous example....
//Assuming restangular did not not send form data in json format by default

    $scope.getWanPip = function(pip){

        RestServ.wandem.post(pip, {},{}, {'Content-Type':'application/json'}).then(function(res){
            console.log(res)      
        }, function(err){
            console.log('Error!!!\n', err);
        })

Note the two empty curly braces instead of one... I can't still perform the post but this is because the data is being sent as part of the url instead of separately. This calls for another question...