How to resolve a http baddata Angular error?
Solution 1
That was a server side problem because the response was not valid to read by angular
PS: read @georgeawg's last comment
Solution 2
This error can be caused because response is in json string so angular trying to parse that json string to JSON. i used transformResponse and error resolved.
$http({
url : url,
method : 'POST',
data: data,
transformResponse: [
function (data) {
return data;
}
]
})
Solution 3
I resolved using a object class that encapusulates the error message and in the angular response i catch the right property.
Example
@RequestMapping(value = "/save", method = RequestMethod.POST, produces= MediaType.APPLICATION_JSON_VALUE)
public default ResponseEntity<S> save(@RequestBody T entidade,HttpServletRequest request){
try {
getService().save(entidade.build());
return new ResponseEntity(entidade, HttpStatus.OK);
} catch (EasyQuoteServiceException e) {
return new ResponseEntity(new Message(e.getMessage(),MessageType.ERROR), HttpStatus.BAD_REQUEST);
}
}
I have a class called Message
public class Message implements Serializable{
private static final long serialVersionUID = 904580124116256409L;
private String message;
private MessageType typeMessage;
public Message() {
super();
}
public Message(String message, MessageType typeMessage) {
super();
this.message = message;
this.typeMessage = typeMessage;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public MessageType getTypeMessage() {
return typeMessage;
}
public void setTypeMessage(MessageType typeMessage) {
this.typeMessage = typeMessage;
}
}
and in the angularjs response method
}).catch(function(error){
$scope.erromessage=error.data.message;
});
}else{
mensagem+="As senhas não parecem ser iguais;";
}
if(mensagem!=""){
$scope.erromessage = mensagem;
}
}
Neji Soltani
BY_DAY = ['Freelance','Play'] BY_NIGHT = BY_DAY.push('Sleep') FOR_FUN ={ 'Sudoku' , 'Chess' , 'Video games (FPS,MMO)' , 'Music (Rock++)'} “We've eased each other's boredom for quite a while... It's been quite fun.” - Ryuk
Updated on June 30, 2022Comments
-
Neji Soltani almost 2 years
I am working on an application using Angular in the frontend and J2EE in the backend , I made a form where i have to post data to be saved in the database
The problem that the post work fine but I cant get the server response after the add ,always i get this error(strangely the error comes in gray color not in red and usually)Error: [$http:baddata] http://errors.angularjs.org/1.6.4/$http/baddata?p0=%7B%22success%22%7D&p1=%7B%7D at angular.min.js:6 at nc (angular.min.js:96) at angular.min.js:97 at q (angular.min.js:7) at xd (angular.min.js:97) at f (angular.min.js:99) at angular.min.js:134 at m.$digest (angular.min.js:145) at m.$apply (angular.min.js:149) at l (angular.min.js:102)
Here's the angular code
$scope.wflow = { "worcode": "HELLOoo", "wordest": "AVDOSS", "worstatus": "ACTIF", "worheight": 0, "lancode": "EN", "worlabel": "Salut monde", "wordescription": "Salut monde", "size": 0 }; $scope.submitForm = function () { console.log(JSON.stringify($scope.wflow)); $http({ method: 'POST', headers: { 'Content-Type': 'application/json' }, url: host + 'api/workflow/add', data: $scope.wflow }).then(function (response) { console.log(response); }, function (response) { console.log(response); }); };
And here's the Java one
@RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public ResponseEntity<String> addWorkflow(@RequestBody LWflow lworkflow){ service.addWorkflow(lworkflow); return new ResponseEntity<String>("{\"success\"}", HttpStatus.OK); }
this is the html part if needed
<table class="table"> <tbody> <tr> <td><b>Code</b></td> <td><input type="text" name="worcode" class="form-control" ng-model="wflow.worcode"></td> </tr> <tr> <td><b>Destination</b></td> <td><input type="text" name="wordest" class="form-control" ng-model="wflow.wordest"><td> </tr> <tr> <td><b>Status</b></td> <td><input type="text" name="worstatus" class="form-control" ng-model="wflow.worstatus"></td> </tr> <tr> <td><b>Height</b></td> <td><input type="number" name="worheight" class="form-control" ng-model="wflow.worheight"><td> </tr> <tr> <td><b>Langue</b></td> <td><input type="text" name="lancode" class="form-control" ng-model="wflow.lancode"></td> </tr> <tr> <td><b>Label</b></td> <td><input type="text" name="worlabel" class="form-control" ng-model="wflow.worlabel"></td> </tr> <tr> <td><b>Description</b></td> <td><input type="text" name="wordescription" class="form-control" ng-model="wflow.wordescription"></td> </tr> <tr> <td><b>Taille</b></td> <td><input type="number" name="size" class="form-control" ng-model="wflow.size"></td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save changes</button> </div> </form>
note that the error comes from the errorCallback function
-
Liyaquet Hussain almost 7 yearsCan you provide plunker for this. So we can sort out issues