I have an application with Cordova and AngularJS.
With Angular I send a value to my backend application (Spring REST). The method I use for this is $http.post.
The problem
When I try to send data to my server Spring won't set the values in my entity. Due to this I cannot save my new data.
Angular code
My AngularJS code is as follows:
httpService.createInBackend = function (url, data, callback, errorCallback) {
http.post(url, data)
.then(function (success) {
callback(success);
}, function (error) {
errorCallback(error.data);
});
};
I use the following parameters:
url: http://<location>:<port>/<application>/<web_socket_url>
data:
data: {
{
"incidentTypeId": 5,
"priorityId": 1,
"creationDate": 1449676871234,
"userId": 1,
"latitude": <some valid location>,
"longitude": <some valid location>
}
},
timeout: 4000
}
I use 'data' and not 'params', because I want to send data via the body. I got this to work with a PUT function, that does not differ much from this function.
My REST controller
@RequestMapping(value = "/employee/new", method = RequestMethod.POST)
public NewEmployee createIncident(@RequestBody NewEmployee employee) {
return employee;
}
My NewEmployee model
private int employeeId;
private int priorityId;
private String information;
private Date creationDate;
private int userId;
private float longitude;
private float latitude;
Angular result
When using the console, I get the following result from this method:
I send:
{
"employeeId":5,
"priorityId":1,
"creationDate":1449677250732,
"userId":1,
"information": "hello world!",
"latitude":<some valid location>,
"longitude":<some valid location>
}
I recieve:
{
employeeId: 0
priorityId: 0
creationDate: null
userId: 0
information: null
latitude: 0
longitude: 0
}
PostMan
I tried the same thing with PostMan (Google chrome plugin) and that way my code works. Due to this I do think it is an issue with my AngularJS code.
I have tried
I have tried using the following AngularJS call:
$http({
method: 'POST',
url: url,
data: data,
timeout: 4000
}).then(function (success) {
callback(success);
}, function (error) {
errorCallback(error);
});
Yet this did not change the result. Still only empty values.
Does anyone know what I am doing wrong?
Have you tried without shorthand version of $http? I think your code will work if you use something like
$http({
method: 'POST',
url: url,
data: JSON.stringify(data)
})
.then(function (success) {
callback(success);
}, function (error) {
errorCallback(error.data);
});
where
data = {
"employeeId":5,
"priorityId":1,
"creationDate":1449677250732,
"userId":1,
"information": "hello world!",
"latitude":<some valid location>,
"longitude":<some valid location>
}
Further reading...
Updated code
After changing the $http.post:
httpService.createInBackend = function (url, data, callback, errorCallback) {
http.post(url, data)
.then(function (success) {
callback(success);
}, function (error) {
errorCallback(error.data);
});
};
to standard $http type of angular:
$http({
method: 'POST',
url: url,
data: data
}).then(function (success) {
callback(success);
}, function (error) {
errorCallback(error);
});
The sending of my data in the body still did not work.
Solution
The problem with this standard way of the $http request is that it does not accept an object like:
data: {
{
"incidentTypeId": 5,
"priorityId": 1,
"creationDate": 1449676871234,
"userId": 1,
"latitude": <some valid location>,
"longitude": <some valid location>
}
},
timeout: 4000
}
I had to change this to:
var incidentInformation = {
incidentTypeId: $scope.selectedIncident.id,
priorityId: $scope.priorityId,
information: $scope.information,
creationDate: Date.now(),
userId: JSON.parse(localStorage.getItem('user')).id,
latitude: location.latitude,
longitude: location.longitude
};
and add a new line:
incidentInformation = JSON.stringify(incidentInformation);
I could directly set this value as the data value: (the Timeout has to be done this way and can not be set in the data object)
$http({
method: 'POST',
url: url,
data: incidentInformation,
timeout: 4000
}).then(function (success) {
callback(success);
}, function (error) {
errorCallback(error);
});
With this changed code the backend now recieved the data correctly and my application is able to save the data.
Thanks Yoogeeks for suggesting the standard method. Strange that AngularJS $http."some method" works different than the standard method.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With