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 stackoverflow.com/questions/241015/…* — Austin
– Austin, Commented Aug 6, 2014 at 20:15
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> should work, did you put it inside head tag? — juvian
– juvian, Commented Aug 6, 2014 at 20:16
The server may be producing the JSON in the wrong character encoding (something other than UTF-8). — Pointy
– Pointy, Commented Aug 6, 2014 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
– Jesz Suarez, Commented Aug 6, 2014 at 21:37

dknaack · Accepted Answer · 2014-08-06 20:36:11Z

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 6, 2014 at 20:36

answered Aug 6, 2014 at 20:15

dknaack

60.7k28 gold badges166 silver badges211 bronze badges

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

2 Comments

Pointy Over a year ago

This should definitely not be necessary.

Jesz Suarez Over a year ago

I tried to replace it using javascript functions but it doesn't work. My json file was saved by a java application.

mittelmania · Accepted Answer · 2014-08-06 20:20:02Z

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 6, 2014 at 20:20

mittelmania

3,6014 gold badges28 silver badges48 bronze badges

1 Comment

Jesz Suarez Over a year ago

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

stekhn · Accepted Answer · 2014-08-06 21:27:25Z

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 6, 2014 at 21:27

answered Aug 6, 2014 at 21:09

stekhn

2,0872 gold badges28 silver badges39 bronze badges

4 Comments

Jesz Suarez Over a year ago

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

stekhn Over a year ago

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 Over a year ago

As for the JSFiddle: You have to press "Run" first to see results.

Jesz Suarez Over a year ago

Thanks I will try it. But, I can't see the JSFiddle, link is down.

Collectives™ on Stack Overflow

Encoding Problems using JSON and jQuery

3 Answers 3

Update

2 Comments

1 Comment

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

2 Comments

1 Comment

4 Comments

Linked

Related