Angular 4 http.get receive "charset UTF-8" but change accented character to their ISO code counterpart

Question

I encounter this problem for the first time and don't find anything about it on the web.

Through Angular Http API, I query an SQL Plus server hosted on IIS that sends me back a json with the following header: Content-Type:text/html; charset=utf-8. But in my application the received accented character are all transformed into their html code counterparts: é => é, è => è and so on.

This is a sample request I made:

let URI = '...';
return this._http.get(URI)
    .map(
        response => {
            console.debug(response);
            return data;
        }
    );

And a result excerpt is like this when logging from within the Angular app:

[
    {
        { 
            i: 0,
            v: "97"
        },
        {
            i: 1,
            v: "éo"
        },
        {
            i: 2,
            v: "2;1"
        },
        {
            i: 3,
            v: "0"
        }
    }
]

But if I query the server directly using Chrome, IE and Firefox, by pasting the exact same URL in the navigation bar, the result is correct:

[
    {
        {
            "i": 0,
            "v": "97"
        },
        {
            "i": 1,
            "v": "é"
        },
        {
            "i": 2,
            "v": "2;1"
        },
        {
            "i": 3,
            "v": "0"
        }
    }
]

Both request have the same headers exactly, so I can only assume that Angular's http API is changing the response somehow but I don't know how to correct this. I tried using decoreURI and decodeURIComponent methods without any success.

I hope somebody has already encountered this issue and fixed it ?

EDIT: I'm using Angular 4.3.6 and Angular CLI 1.2.1

Answer 1

I think the answer from this question :

https://stackoverflow.com/a/43164489/4770754

is a better way to go about it :

Include the RequestOptionsArgs when you send request.

Specify the field responseType : ResponseContentType inside RequestOptionsArgs. (Either ResponseContentType.ArrayBuffer or ResponseContentType.Blob)

Use TextDecoder or something similar to decode the result.

See the docs:

https://angular.io/api/http/Http

https://angular.io/api/http/RequestOptions

https://angular.io/api/http/ResponseContentType

once you've gotten back your response in the right encoding you can then proceed to convert them from ISO to UTF8 this way : (https://stackoverflow.com/a/5396742/4770754)

let utfString = decodeURIComponent(ajaxreturn.replace(/\\x/g,"%"));

but I suspect by that point you would be quite satisfied with displaying them on the website as-is.

in which case you can just set the whole website to your encoding :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

:)