AngularJS $http.post with body

Question

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?

Solution 1

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.

Solution 2

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...

Comments

[Mr.wiseguy]

I have just tried this but unfortunately it did not work

[yoogeeks]

And the following is the content of data? { "employeeId":5, "priorityId":1, "creationDate":1449677250732, "userId":1, "information": "hello world!", "latitude":<some valid location>, "longitude":<some valid location>} Have you verified what you are receiving at back-end?