Is it possible to send a PATCH request with a complex object in the request body? The following works fine but it sends the object as url parameters not in the request body..
//region - - - - - - - - - - - - - - - update with PATCH
patch: function(url, obj, funcSuccess){
// server call
var resP = resource(appConfigSvc.apiBaseUrl + url, obj, {
'update': {
method:'PATCH',
headers: {'Content-Type': 'application/json' }
}
});
var defer = q.defer();
resP.update(
function(data) {
defer.resolve(data);
if(funcSuccess){
funcSuccess(data);
}
},
function(response) {
//responseHandlerSvc.handleResponse(response);
defer.reject(response);
});
return defer.promise;
},
//endregion
WebApi doesn't have a problem accepting patch request body. Postman also allows sending patch requests with body. The only problem is Angular $resource.
Check this out. Although patch and put methods fail to send payload (on working with post)
I created this method to send any request I need using $http. Nice and simple..
function send(method, url, obj, params){
var deferred = $q.defer();
var promise = http(
{
method:method,
url: url,
data:obj,
headers:{'Content-Type':'application/json', 'Accept':'application/json'},
params:params
})
.success(function(data) {
deferred.resolve(data);
})
.error(function(msg, code) {
deferred.reject(msg);
});
return deferred.promise;
}
Related
I'm trying to learn ExpressJS and I'm having trouble getting IP address from an Express route to display in the browser via Angular controller.
I'm using 2 Nodejs modules (request-ip and geoip2) to get the IP and then lookup geolocation data for that IP. Then trying to use Angular to display the geolocation data in the browser using an Angular $http get call.
My Express route for the IP:
// get IP address
router.get('/ip', function (req, res, next) {
console.log('requestIP is ' + ip);
// geolocation
geoip2.lookupSimple(ip, function(error, result) {
if (error) {
//return res.status(400).json({error: 'Something happened'});//default
return res.sendStatus(400).json({error: 'Something happened'});
}
else if (result) {
return res.send(result);
}
});
});
And my AngularJS controller code:
function MainController($http) {
var vm = this;
vm.message = 'Hello World';
vm.location = '';
vm.getLocation = function() {
$http({
method: 'GET',
url: 'localhost:8000/ip'
}).then(function (result) {
console.log(result);
return vm.location = result;
});
};
};
The Hello World message displays but not the location...? I can also go to localhost:8000/ip and see the JSON result. The result doesn't appear in Chrome's console either. The result is a json object like this:
{"country":"US","continent":"NA","postal":"98296","city":"Snohomish","location":{"accuracy_radius":20,"latitude":47.8519,"longitude":-122.0921,"metro_code":819,"time_zone":"America/Los_Angeles"},"subdivision":"WA"}
I'm not sure why the Hello Word displays and the location doesn't when it seems that I have everything configured correctly... so obviously I'm doing something wrong that I don't see...?
You have initialised 'vm.location' as a string when in fact it is a JSON object.
vm.location = {};
You need to adjust the url paramater in your request to:
url: '/ip'
As you are sending back JSON from Express.js, you should change your response line to:
return res.json(result);
Do you call vm.getLocation() somewhere in your code after this?
The data you need is under result.data from the response object.
Also in order to display the data in the html you have to specify which property to display from the vm.location object (vm.location.country, vm.location.city etc..).
From angular docs about $http:
The response object has these properties:
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.
Is this express js and angular hosted on the same port? If so please replace your
$http({
method: 'GET',
url: 'localhost:8000/ip'
}).then(function (result) {
console.log(result);
return vm.location = result;
});
with
$http({
method: 'GET',
url: '/ip'
}).then(function (result) {
console.log(result);
return vm.location = result;
});
It may be considered as CORS call and you have it probably disabled.
You can also specify second function to then (look code below) and see if error callback is called.
$http({
method: 'GET',
url: '/ip'
}).then(function (result) {
console.log(result);
return vm.location = result;
}, function (error) {
console.log(error);
});
I am developing an ionic app when I am sending a post request using angularjs $http.post to my express js server, I cannot see the data in the req.body.
I am running my server on localhost:3000
Code in my server for CORS
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type");
res.header("Access-Control-Allow-Methods", "GET,PUT,DELETE,POST");
next();
});
My angular Js post request
$http.post('http://localhost:3000/signup',{"username":"x","password":"y"}).success(function(res){
console.log(res);
if(res.msg=="success")
{
//do something
}
}
I am able to see data in req.body as "key" like:
{'{"username":"x","password":"y"}':''}
When I am setting the header from ionic app as:
$http.defaults.headers.post["Content-Type"] = 'application/x-www-form- urlencoded; charset=UTF-8';
Please let me know how to debug this
You are getting the entire data as key in req.body. This is because the angular request that you are making is wrong. Here is the part of code that should work
$http({
url: 'http://localhost:3000/signup',
method: "POST",
data: { username : "a" , password : "b" }
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
Well I figured that out
I have used this stackoverflow link Ionic framework http post request to parse my data before its send to my server
$http.defaults.headers.post["Content-Type"] = 'application/x-www-form-urlencoded; charset=UTF-8';
Object.toparams = function ObjecttoParams(obj)
{
var p = [];
for (var key in obj)
{
p.push(key + '=' + encodeURIComponent(obj[key]));
}
return p.join('&');
};
$http({
url: 'http://localhost:3000/signup',
method: "POST",
data: Object.toparams(u)
})
.then(function(response) {
console.log(response);
},
function(response) { // optional
// failed
});
I'm working on a small project with MEAN in order to get started with it. I've been following the tutorial on thinkster.io (with some minor modifications made by me) and so far I've obtained good results. I've tested the API routes with Postman and everything is working. Problem is, for some reason (keep in mind that I'm new to NodeJS), it only accepts requests with Content-type: x-www-form-urlencoded.
The solution I've come across several times is to change the headers in the options parameter of the $resource. This is the code I have
register: function(user){
var deferred = $q.defer();
var UserResource = $resource('/api/users/register', {}, {
save: {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: function (data, headersGetter) {
console.log(data); // data is undefined ??
var str = [];
for (var d in data)
str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
return str.join("&");
}
}
});
UserResource.save(function(user){
this.saveToken(user.token);
deferred.resolve(user);
}, function(user){
deferred.reject(user);
});
return deferred.promise;
}
The register function is declared on an angular service. Problem is that the backend is sending me an error because the req.body object is empty. This is due to the fact that the transformRequest method is not executing correctly. Doing a little debugging I found that the 'data' parameter is undefined.
This is the code in the backend
router.post('/register', function(req, res, next){
if(!req.body.username || !req.body.password){
console.log(req.body.username);
return res.status(400).json({message: 'Por favor llene todos los campos'});
}
var user = new User();
user.username = req.body.username;
user.fullname = req.body.fullname;
user.setPassword(req.body.password);
user.save(function (err){
if(err){ return next(err); }
return res.json({token: user.generateJWT()})
});
});
Any ideas would be appreciated. Thanks in advance
You should pass user data in 1st parameter of save method(that will pass through the request body), there after you can place successCallback & errorCallback
UserResource.save(user, function(user){
this.saveToken(user.token);
deferred.resolve(user);
}, function(user){
deferred.reject(user);
});
Checkout this article
Here is my service:
home.factory("homeService", function ($http, $q) {
var service =
{
getAssets: function () {
var deferred = $q.defer();
var response = $http({
method: "post",
dataType: "json",
data: '',
headers: {
'Content-Type': "application/json"
},
url: "http://localhost/myWeb/services/reports_ws.asmx/getData",
});
response.success(function (data) {
deferred.resolve(data);
});
response.error(function (data) {
alert('Error');
});
// Return the promise to the controller
return deferred.promise;
},
}
return service;
I am getting 500 error from the server when I use application/json for the content. using plain/text works fine and data is returned, but in an xml format although the server sends data back in json format. I have tested it in Chrome, everything works fine. I also noticed that Chrome sends request using "application/x-www-form-urlencoded" for content-type. I tried it too, but still got data in xml. Please help.
Thanks
keep trying with the following:
header: { "Content-Type" : "application/x-www-form-urlencoded"}
Please notice that this applies only for the header of the request, not the response. The response depends on your backend (server side).
Several ways are available to return JSON data in the response depending of the type of server you are using.
I have a service where I am pulling data from server. When I click the button to send out the request to server through this service, the window freezes until I receive a response from server. Is there anything I can do to make this request asynchronous ?
Here is my service.
app.factory('service', function($http) {
return {
getLogData : function(startTime,endTime){
return $http({
url: baseURL + 'getLogData',
method: 'GET',
async: true,
cache: false,
headers: {'Accept': 'application/json', 'Pragma': 'no-cache'},
params: {'startTime': startTime , 'endTime': endTime}
});
}
};
)};
HTML.
<button ng-click="getData()">Refresh</button>
<img src="pending.gif" ng-show="dataPending" />
Code
$scope.getData = function(){
service.getLogData().success(function(data){
//process data
}).error(function(e){
//show error message
});
}
While there is some argument about the pros and cons of your approach, I am thinking that the problem is answered here: AJAX call freezes browser for a bit while it gets response and executes success
To test if this in fact part of the problem, dummy up a response and serve it statically. I use Fiddler or WireShark to get the response and then save to a file like testService.json. XHR and all of it's various derivatives like $HTTP $.ajax see it as a service though the headers might be slightly different.
Use the success promise, and wrap up the log data in a set of objects that you can attach to a $scope.
So instead of having your service have a blocking method, have it maintain a list of "LogEntries".
// constructor function
var LogEntry = function() {
/*...*/
}
var logEntries = [];
// Non-blocking fetch log data
var getLogData = function() {
return $http({
url : baseURL + 'getLogData',
method : 'GET',
async : true,
cache : false,
headers : { 'Accept' : 'application/json' , 'Pragma':'no-cache'},
params : {'startTime' : startTime , 'endTime' : endTime}
}).success(function(data) {;
// for each log entry in data, populate logEntries
// push(new LogEntry( stuff from data ))...
};
}
Then in your controller, inject your service and reference this service's log data array so Angular will watch it and change the view correctly
$scope.logEntries = mySvc.logEntries;
Then in the HTML, simply do something over logEntries:
<p ng-repeat="logEntry in logEntries">
{{logEntry}}
</p>
use this code to config
$httpProvider.useApplyAsync(true);
var url = //Your URL;
var config = {
async:true
};
var promise= $http.get(url, config);
promise.then(
function (result)
{
return result.data;
},
function (error)
{
return error;
}
);