php - Display special characters in javascript


I am using the Google Places API to supply my application with a list of cities, countries, etc for a dropdown menu. I use an AJAX request to a file containing this code:

$results = file_get_contents("" . $key . "&input=" . $input);
    $decode = json_decode($results, true);

    foreach($decode["predictions"] as $value){
        $json_array[] = $value["description"];

    echo json_encode($json_array);

Everything seems to work okay on this side of things, however when the JSON is returned to the AJAX application, some of the characters appear incorrectly. For example, the "ã" in "São Paulo" appears as ",," or "S,,o Paulo" when I try to display the results. If I alert the result, the characters do display correctly in the pop-up - so I seem to be missing something when I give the results to the javascript to display in the drop down. (What also is irritating is that the incorrectly coded results end up getting entered into my database when the user selects from the drop down.)

I have tried encoding each string with "utf8_encode()" before I add it to "$json_array" (in the PHP file, of course), but this only seems to complicate things - it appears that the results are double-encoded or something when it is finally displayed in the javascript.

Also, I should note that the web page has the UTF-8 charset in the meta tag.

As a follow-up:

I created a simple HTML page which in which I displayed "ã" in a div, and it did show up properly. I also used jQuery to display the same character in another div on page load, and this too showed up correctly. And I didn't even need to set the encoding on that page. So I can only assume, because this test page is plain vanilla HTML, that the problem is coming from my PHP set-up.

I have added the following to the head of another PHP tests page:

header("Content-Type: text/html; charset=UTF-8");

but I am still seeing the characters incorrectly displayed. So to this point I have added the above, updated the default_encoding to UTF-8 in php.ini, and checked that the meta tag specifies UTF-8. This is really starting to irritate me now!




use one of either header:

header('Content-type: application/json');
header('Content-Type: text/html; charset=UTF-8);

work for me in case of Arabic language.




It might be that the webpage is not recognizing the character. To fix this, use HTML code for this character.

For example, the HTML code forã isã.

You can find more information on this here.

Check for special characters in your PHP string and convert these.

$mystring = 'São Paulo';
$findme   = 'ã';
$pos = strpos($mystring, $findme);

if ($pos != false) $findme = "ã";



This was the dumbest thing... but I learned a lot about character encoding along the way. It turns out (and I didn't mention this at all because it just didn't seem relevant) that the Helvetica fonts in Bootstrap cannot display these special characters. Yeah, wtf? I had every possible encoding option set to "UTF-8", and all along it was just the stupid CSS font selection. So in the end I just changed the font family to "Arial" and instantly the problem was solved.

Thank to everyone for the input.

People are also looking for solutions to the problem: how to insert values from XML string into mysql with PHP, correctly?


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.