JSON's application/json header wont work on chrome/IE while works fine on Firefox-Collection of common programming errors

2 years ago
admin
3 minutes

I am sending an ajax request to pull list of web services and then show them in table later on. However, the code workds on Firefox correctly but not on chorome and IE.

AJAX REQUEST:

$.ajax({
   url: 'http://dev.ragld.com/services/',
   method: 'GET',
   accept: 'application/json',
   beforeSend: setHeader,
   async: false, 
   success: function(data){  
       var servicesObj = $.parseJSON(data);

       $.each(servicesObj, function(i, serviceItem){
           alert(serviceItem.name);
       });
   }
});

//function to setup header information
function setHeader(xhr){
    xhr.setRequestHeader('accept', 'application/json'); 
}

JSON Response:

[
    {
        "name": "OS-ONS-bar",
        "type": "RelationshipService",
        "endpoint": "http://dev.ragld.com/services/bar/"
    },
    {
        "name": "OS-ONS-sameAs",
        "type": "RelationshipService",
        "endpoint": "http://dev.ragld.com/services/sameas/"
    },
    {
        "name": "Maths Service 2",
        "type": "ArithmeticService",
        "endpoint": "http://dev.ragld.com/services/arithmetic/"
    }
]

ERROR I get in chrome with above code:

Uncaught TypeError: Cannot read property 'length' of null jquery.min.js:2
e.extend.each jquery.min.js:2
$.ajax.success admin.php:157
f.Callbacks.o jquery.min.js:2
f.Callbacks.p.fireWith jquery.min.js:2
w jquery.min.js:4
f.support.ajax.f.ajaxTransport.send.d jquery.min.js:4
f.support.ajax.f.ajaxTransport.send jquery.min.js:4
f.extend.ajax jquery.min.js:4
(anonymous function) admin.php:148
f.Callbacks.o jquery.min.js:2
f.Callbacks.p.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B

PROBLEMS:

  1. This works fine on Firefox but not on Chrome and IE.
  2. Now, if I remove this $.parseJSON, then it will work on chrome but NOT in firefox/IE

PS: ajax request is made to a different server and this code is on different. Anyone please advise solution that works on all browsers???

EDIT1: Looks like chrome automatically parse it or getting the json header, whereas, in firefox we need to parse it explicitly usin parseJSON??? any ideas?

EDIT2 (console.log from FireFox):

[{"name":"OS-ONS-bar","type":"RelationshipService","endpoint":"http:\/\/dev.ragld.com\/services\/bar\/"},{"name":"OS-ONS-sameAs","type":"RelationshipService","endpoint":"http:\/\/dev.ragld.com\/services\/sameas\/"},{"name":"Maths Service 2","type":"ArithmeticService","endpoint":"http:\/\/dev.ragld.com\/services\/arithmetic\/"}]

console.log from Chrome:

  1. You should specify the ajax option dataType as ‘json’. Otherwise jQuery will have to guess what data type it should return and you might get various results.

    DataType

    If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

    View my demo that works in FF, IE and Chrome.

    You should inspect the XHR response and make sure that your service is actually returning JSON.

Originally posted 2013-11-13 09:49:07.