Encoding Problems using JSON and jQuery

Question

I have a json file like this:

{
"nombre": "Jesús Ramírez",
"edad": "25 Años",
"imagen":"file.jpg"
}

I get data from json using jquery function $.getJSON, but I have a problem when I show data in my html document. I do this:

JAVASCRIPT

   $.getJSON(file.json, function(data) {

        var name= data.nombre;
        document.getElementById("student_name").innerHTML=name;

        var age= data.edad;
        document.getElementById("student_age").innerHTML=age;


        var photo= data.imagen;
        document.getElementById("student_img");
        student_img.src=photo;


  });

HTML CODE

<div id="student_name"></div>
<div id="student_age"></div>
<img id="student_img"></img>

But data is showed like this:

Jes�s Ram�rez
25 A�os

I'm using:

<meta charset="utf-8">

and I tried:

<META HTTP-EQUIV= "Content-Type" CONTENT="text/html;charset=ISO-8859-1">

but they don´t work.

Anyone can help me? what can I do to solve this??

Might find some useful info in here **http://stackoverflow.com/questions/241015/question-mark-characters-displaying-within-text-why-is-this*** — Austin, Aug 06 '14 at 20:15
The server may be producing the JSON in the wrong character encoding (something other than UTF-8). — Pointy, Aug 06 '14 at 20:23
but I'm working on local files, im not using a server to load data, what can i do in this case? — Jesz Suarez, Aug 06 '14 at 21:37

dknaack · Answer 1 · 2014-08-06T20:36:11.060

1

To show spanish characters you can use the corresponding html special characters. I suggest to write a function to replace the characters with the right html chars.

Here is a list. HTML Codes for Spanish

Update

You can use this function to convert.

function HTMLEncode(str){
  var i = str.length,
      aRet = [];

  while (i--) {
    var iC = str[i].charCodeAt();
    if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
      aRet[i] = '&#'+iC+';';
    } else {
      aRet[i] = str[i];
    }
   }
  return aRet.join('');    
}

edited Aug 06 '14 at 20:36

answered Aug 06 '14 at 20:15

dknaack

60,192
27
155
202

1

This should definitely not be necessary. – Pointy Aug 06 '14 at 20:21
I tried to replace it using javascript functions but it doesn't work. My json file was saved by a java application. – Jesz Suarez Aug 06 '14 at 20:22

score 0 · Answer 2 · answered Aug 06 '14 at 20:20

0

If you have control over the service that sends you the JSON information, I highly recommend that you URL-encode it before sending to the webpage.

If your service is written in PHP, for example, you could do this:

echo urlencode($your_json_string);

answered Aug 06 '14 at 20:20

mittelmania

3,393
4
23
48

I'm not using php or a server to load my data. All my application is for local working. First, a java application builds the json file, then I use jquery to parse my json file and finally show the data in a HTML page – Jesz Suarez Aug 06 '14 at 21:33

stekhn · Answer 3 · 2014-08-06T21:27:25.767

0

You could set the content type of your AJAX request before, even though the use of $.ajaxSetup is not recommended.

$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"});

Another idea would be using $.ajax()instead of $.getJson().

$.ajax({
    dataType: "json",
    data: data,
    contentType: "application/json; charset=utf-8",
    success: function() {
       var name= data.nombre;
       document.getElementById("student_name").innerHTML=name;

       var age= data.edad;
       document.getElementById("student_age").innerHTML=age;


       var photo= data.imagen;
       document.getElementById("student_img");
       student_img.src=photo;
    }
});

Here is a JSFiddle to prove that it is working.

edited Aug 06 '14 at 21:27

answered Aug 06 '14 at 21:09

stekhn

1,969
2
25
38

I'm not using php or a server to load my data. All my application is for local working. First, a java application builds the json file, then I use jquery to parse my json file and finally show the data in a HTML page, im not using ajax. only javascript – Jesz Suarez Aug 06 '14 at 21:35
As the Fiddle shows, this works as well with local data. Jquery's .getJson() is nothing but a simplified, preconfigured .ajax() call. And since the configuration doesn't fit your use case, you will encounter encoding problems. The right way to solve this is setting the correct encoding when getting the data – not fixing the data afterwards with some obscure parsing. – stekhn Aug 07 '14 at 08:28
As for the JSFiddle: You have to press "Run" first to see results. – stekhn Aug 07 '14 at 08:29
Thanks I will try it. But, I can't see the JSFiddle, link is down. – Jesz Suarez Aug 07 '14 at 17:16

Encoding Problems using JSON and jQuery

3 Answers3

Update