Angular fails to parse string from api call (web core 3)

Question

Controller code:

 [Route("api/[controller]")]
[ApiController]
public class AjaxController : ControllerBase
{
    ApplicationDbContext dbContext = null;
    public AjaxController(ApplicationDbContext ctx)
    {
        dbContext = ctx;
    }

    [HttpGet]
    [Route("GetString")]
    public string GetString()
    {
        return "Hello World";
    }

    [HttpGet]
    [Route("GetCategories")]
    public Category[] GetCategories()
    {
        return dbContext.Categories.ToArray();
    }
}

Angular code:

http.get<string>(baseUrl + 'api/ajax/GetString').subscribe(result => {
      console.log(result);
    }, error => console.error(error));

While Angular can parse without error the GetCategories endpoint, it cannot parse the much simpler GetString. Why? The error in the console is:

error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" text: "Hello World"

I tried wit Postman and the response is just fine, see screenshot:

What does the response data look like - can you console.log it? The error to me indicates that there is invalid JSON — Ash
– Ash, Commented Apr 4, 2020 at 11:47
I have written what the console says it's a parsing error. It cannot parse to string the response data. — user1238784
– user1238784, Commented Apr 4, 2020 at 11:49
it says also: headers: Object { normalizedNames: Map(0), lazyUpdate: null, lazyInit: lazyInit() — user1238784
– user1238784, Commented Apr 4, 2020 at 11:52
I tried with Postman and it can parse it just fine, I get a proper response — user1238784
– user1238784, Commented Apr 4, 2020 at 11:55
Can you include a text dump of the response or a screenshot of Postman? Seems to me like the response type isn't matching — Ash
– Ash, Commented Apr 4, 2020 at 12:04

Ash · Accepted Answer · 2020-04-04 12:39:14Z

2

The issue is your response from GetString is returning just a string of value Hello World as shown by the screenshot from Postman. The GetCategories endpoint must be returning valid JSON if you are getting a valid response.

By default Angular assumes the response type of a HttpRequest to be of type json.

To fix this, specify as the second parameter to http.get() the responseType expected from the server which in your case for the GetString endpoint will be 'text'. So your http.get() call should look like the following:

http.get<string>(baseUrl + 'api/ajax/GetString', { responseType: 'text' }).subscribe(result => {
    console.log(result);
  }, error => console.error(error));

If your intention was to return valid JSON from GetString then you need to format the response from your server as appropriate.

See the Angular documentation on HttpRequest - responseType. I've included a copy below.

responseType: 'arraybuffer' | 'blob' | 'json' | 'text'

The expected response type of the server.

This is used to parse the response appropriately before returning it to the requestee.

answered Apr 4, 2020 at 12:39

Ash

11.5k4 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1238784 Over a year ago

Thanks for your answer but I solved the problem by converting the string to json format:public string GetString() { return JsonConvert.SerializeObject( "Hello World"); }

Collectives™ on Stack Overflow

Angular fails to parse string from api call (web core 3)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related