Issue with angular js $http service

My code

given a call to this function with a given accountTypeUrl

this.deleteAccount = function (accountTypeId) {
  var deleteurl= accountTypeUrl+"/"+accountTypeId;
    url: deleteurl, 
    method: 'DELETE', 
    headers: {"Content-Type": "application/json;charset=utf-8"}
  }).then(function(res) {
    console.log(res);	// its not printing
  }, function(error) {
    console.log(error);	 // prints here       

in Browser Chrome > F12 > Network : Response to the function call is showing “Success” but angular js is throwing error in console and prints

	console.log(error);	=> 

	SyntaxError: Unexpected token S in JSON at position 0
    at JSON.parse (<anonymous>)
    at oc (angular.min.js:14)
    at Fe.e.defaults.transformResponse (angular.min.js:77)
    at angular.min.js:76
    at r (angular.min.js:7)
    at Tc (angular.min.js:76)
    at b (angular.min.js:78)
    at angular.min.js:109
    at h.$eval (angular.min.js:123)
    at h.$digest (angular.min.js:120)

What is the issue ? I’m using angular js 1.3

what that error is telling ?
How to debug what has gone wrong ?
I could not find out where is the issue. Is there any checks ?

What does your JSon look like?

How do you check Json in Chrome ? I’ll verify and let you know

Is it different than this
in Browser Chrome > F12 > Network and then Response tab ?

Soz, I should have looked at the code more carefully. I saw the error message SyntaxError: Unexpected token S in JSON... and figured the server was returning malformed JSON.

However, it seems you are sending a DELETE request to your server, but no request body (i.e. no data parameter). Could that be causing your issue? What happens if you remove the headers from the config object?

Or are you working with a backend framework that expects content-type for all HTTP verbs?

data is there . I’m sending id to delete as parameter

What does the URL look like? You shouldn’t really need to pass anything to it except the ID of whatever you want to delete. And if that is the case, you should be able to remove the JSON headers as you are not sending any JSON to the server.

data goes to the server and deletion works perfectly at server side from database.
However during response return the error is at front-end and angular is going to the error part here

function(error) {
    console.log(error);	 // prints here       

I’m stuck now to drill down the cause of the issue now

What happens if you remove:

headers: {"Content-Type": "application/json;charset=utf-8"}

from your $http call?

Also, use Chrome’s dev tools (network tab) to check what is being returned.

you may not need this RestService code but here is what happens at server side in my microservice

@RequestMapping(value={"/v1/{accountId}"}, method=RequestMethod.DELETE)
	public ResponseEntity<?> delete(@PathVariable("accountId") String accountId) {
		  try {
			  ArrayList<Object> list = new ArrayList<Object>();
			  return new ResponseEntity<String>("Success", HttpStatus.OK); // this retunrs perfectly to browser with Success in Debug mode
		  } catch (Exception e) {
			  return (new ResponseEntity<String>(ErrorCodes.SERVER_ERROR.getDescription(), HttpStatus.INTERNAL_SERVER_ERROR));

This is just for your information

yup. I was trying to view that. how do you see that ? network tab) Response shows me “Success”. Is it correct way to view the returned object ?

Yeah, shooting in the dark a bit now, so I’ll step aside and see if anyone else has an idea.

I’d still be interested to know the answers to my previous question though (what happens if you remove the headers attribute).

I’ll answer to that as soon as I access the system to test that part. approx 15 hours later :slight_smile:

by the way what you’d be expecting in that case so that I could capture that part too during test and present that here as well.

Not sure really. Hopefully, it’d work. However, you’re using an old Angular version and there have been a couple of issues around setting content-type headers for DELETE requests (example) in older versions.

But as I said, shooting in the dark at this point, I’m afraid (without a concrete example to reproduce).

Thanks . I am planing to Try these methods then

Method 1 : remove headers: {"Content-Type": "application/json;charset=utf-8"} in the call and try

Method 2 : change header to headers: {"Content-Type": "application/xml;charset=utf-8"} and try

Is there any other methods you think of to try ? I’ll update results to each of these as soon as I get access to the system.

If you’re asking me how I’d debug your problem, I’d isolate the error to the most minimal reproducible test case I can until you hone in on what is causing your issue. Fore example, you can try just returning a 200 response from the server, see if that helps. Also, you can use the Chrome Dev Tools to inspect the response. If you click on the specific response, you should be able to drill down and view the various headers, payload etc…

Any way you can determine the response status code?

If a DELETE method is successfully applied, there are several response status codes possible:

  • A 202 (Accepted) status code if the action will likely succeed but has not yet been enacted.
  • A 204 (No Content) status code if the action has been enacted and no further information is to be supplied.
  • A 200 (OK) status code if the action has been enacted and the response message includes a representation describing the status.

As for the “S”, my guess is it’s from either the text “String” or “Success” not being in JSON but being passed to the parser.

1 Like

response status code : 200

this issue is resolved now. I had to change RestService and prepare a Json like this to return.

Map<String, Object> dataMap = new HashMap<String, Object>();
dataMap.put("message", "  deleted successfully");
dataMap.put("status", "OK");
return new ResponseEntity<Map>(dataMap, HttpStatus.OK);

this may be useful to someone who faces the same issue in angular js 1.3.x


Take a look at