[FIXED] Special character in json response is not parsed in IE

Issue

I am using the following code in the js file to get the response back from servlet as follows:

The code is as follows:

  function(response){
    $("#city").attr("disabled", false);
    var select = $('#cityList');
    select.find('option').remove();
    var parsedObject = JSON.parse(response);      
    for(var city in parsedObject){           
   $('<option>').val(parsedObject[city].cityName).text(parsedObject[city].cityName).appendTo(select);}}

In Internet Explorer, I get an error stating "Invalid Character" in the line: var parsedObject = JSON.parse(response);

After checking the response, I noticed an object where the city name is causing an issue: {"countryId":0,"stateId":0,"cityId":4046,"cityName":"Belle Vall�}

The correct city name is Belle Vallée. It seems IE is not allowing to parse this city name and hence, the drop down displays no city value.

In the Google Chrome, I do see all city values however, the above stated city name is not displayed properly as shown below:

I came across a solution to add the following code in the header to allow chrome to display special characters properly but it didn't work for me.

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

The following code is being executed on the servlet side:

This is how my new function with ajax call looks like:

function changeState(){
    var state = $("input#province").val();   
            
    $.ajax({
        type: "GET",    
        url : 'LocationServlet',
        dataType : "json",
        contentType: "application/json; charset=utf-8",
        data : {"stateName": state},        
        success : function(response){
        $("#city").attr("disabled", false);
        var select = $('#cityList');
        select.find('option').remove();
        var parsedObject = JSON.parse(response);

        for(var city in parsedObject){
            $('<option>').val(parsedObject[city].cityName).text(parsedObject[city].cityName).appendTo(select);
        }
      } 
    });     
}

Solution

It seems that the response you have received has already been parsed. Instead of the line: var parsedObject = JSON.parse(response);

Try using "response" received as a parsed object.

Answered By - Nick Brown