$.ajax 200 OK, parseerror, invalid character on Internet Explorer 7,8,9,10

Question

This chunk of code is working across Chrome, FF but its not working on Internet Explorer! It is just a simple JSON file call, get data, and display to HTML webpage. Take a look below:

$.ajax({
              type: "GET",
              url: "shop.json",
              cache: false,
              data: "{}",
              success: function(jd) {
                $.each(jd.lots, function(i,f){
                  if(f.shop.category != "PARKING")
                  {
                    if(jQuery.inArray(f.shop.category, categoryArray) == -1) //not in array
                    {
                      categoryArray.push(f.shop.category);
                     $('#tenant-list').append('<table width="100%" class="tenantList" id="' +jQuery.inArray(f.shop.category, categoryArray) + '"><th class="title" style="background-color: orange;" colspan="3">'+f.shop.category+'</th>');
                      $('.categoryList').append('<tr><td><a class="categoryListAnchor" style="color: #666666;text-decoration: none;" href="#'+jQuery.inArray(f.shop.category, categoryArray)+'">'+f.shop.category+'</td></tr>');
                    }
                    $('#'+jQuery.inArray(f.shop.category, categoryArray)).append('<tr><td class="shopName" width="500px;">' + f.shop.name + '</td><td><img src="images/'+f.zone+'.jpg"></td><td>' +f.floor + '</td></tr></table>');

               };
                });

                        $("#tenant-list").jSort({
                              sort_by: 'th.title',
                              item: 'table',
                              order: 'asc'
                            });


                        $(".tenantList").jSort({
                              sort_by: 'td.shopName',
                              item: 'tr',
                              order: 'asc'
                           });

                        $(".categoryList").jSort({
                              sort_by: 'td',
                              item: 'tr',
                              order: 'asc'
                           });
                        $("#instruction").show();
                        $("#ajaxLoading").hide();

              },
              error: function (request, status, error) { 
                        alert(request.status + ", " + status + ", " + error); 
                      }
                      });

The shop.json its a 1.2mb json file stored locally validated fully at jsonlint with 0 errors. So there won't be any cross origin issue I suppose. However when I was testing my script on IE, the error function executed, and gives me an alert of:

  200, parseerror, SyntaxError: Invalid Character

ResponseHeader in the developer console of IE shows the full content of my JSON file and it appears to be 200 OK.

Kindly help me on this. p/s: The code above, I have added "dataType: json" and "contentType: "application/json; charset=utf-8" before this, also the same error.

Let me know anyone need more info on this.

Answer 1

Probably too late but check The "shop.json" file which you are referring to. any property in the JSON object should not be a 'undefined' value

if one of the properties in the JSON object is which you are trying to parse is 'undefined' IE would give that error.