Displaying accented character in Javascript

Question

I am having problem displaying accented character in my app; It is showing ⛽ instead of ó. The string is coming from a json file retrieved from a server. Here are the technical details:

JSON: (This is the object being retrieved from the server)
notice the 3rd key "Relación" the letter "o" is accented.

[
    {
        "key": "Canales"
    },
    {
        "key": "Productos"
    },
    {
        "key": "Relación con el ejecutivo"      
    }
]

Ajax (here is the code to retrieve the information)
notice I already added charset=utf-8 as most answers suggest

$.ajax({
    url: url,
    type: "GET",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(uri){
         alert("clintg test: " + JSON.stringify(uri));
    }
}

Alert: (as you can see, it is just showing a box symbol where it's supposed to be -> ó)

screenshot of alert box

try utf8_encode() or something like this.. while passing the data from server... — Riad, Nov 12 '14 at 10:39
I am not sure, I am only responsible for the front-end (javascript,html,etc) of the app. I can't modify the codes on the API. — clintgh, Nov 12 '14 at 10:48
From your first snippet it's obvious that the server data is actually encoded as ISO 8859 (Win1252), not utf8. Use that charset in your ajax call, or, better, contact the server-side guys and tell them it's a shame not to use unicode as of 2014. — georg, Nov 12 '14 at 10:56
@georg Good catch. I tried what you said using iso-8859-1 as my charset but still the same. `application/json; charset=ISO-8859-1`, anything i missed? — clintgh, Nov 12 '14 at 11:03
Thanks for the answer @georg, it lacked detail but this it got the job done with the help of this link: http://stackoverflow.com/questions/8988573/jquery-ignores-encoding-iso-8859-1 I had to override the mime type. The default of ajax in utf-8 — clintgh, Nov 12 '14 at 11:10
@clintgh: good research, consider self-answering your question so that it helps other people with the same problem. — georg, Nov 12 '14 at 11:15

score 3 · Accepted Answer · edited May 23 '17 at 11:33

3

To give more detail to @georg 's advice that helped me solve this issue:

Since I can't change the server side scripts, I adjusted the code on my side.
I changed the charset in my ajax request to ISO-8859-1, but since the default charset of ajax is utf-8, I had to override the charset with $.ajax.beforeSend:

$.ajax({
    url: url,
    type: "GET",
    dataType: "json",
    contentType: "application/json; charset=iso-8859-1",
    success: function(uri){
         alert("clintg test: " + JSON.stringify(uri));
    },
    beforeSend: function(jqXHR) {
        jqXHR.overrideMimeType('application/json;charset=iso-8859-1');
    }
}

Here's a link to the question that helped me figure out and override the charset: Jquery ignores encoding ISO-8859-1

edited May 23 '17 at 11:33

Community

1
1

answered Nov 13 '14 at 03:05

clintgh

2,039
3
28
44

This helped so much thank you I used it with xhttpRequest like this" xhr.overrideMimeType("application/json;charset=iso-8859-1"); – partizanos Apr 19 '17 at 14:49
I may sound out of topic. But I have similar issue in angular2. How do i solve it? – Naik Ashwini May 04 '17 at 11:09

Displaying accented character in Javascript

1 Answers1

Linked