Problem Fetching JSON Result with jQuery in Firefox and Chrome (IE8 Works)
- by senfo
I'm attempting to parse JSON using jQuery and I'm running into issues. Using the code below, the data keeps coming back null:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
</head>
<body>
<div id="msg"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.ajax({
url: 'http://datawarehouse.hrsa.gov/ReleaseTest/HGDWDataWebService/HGDWDataService.aspx?service=HC&zip=20002&radius=10&filter=8357&format=JSON',
type: 'GET',
dataType: 'json',
success: function(data) {
$('#msg').html(data[0].title); // Always null in Firefox/Chrome. Works in IE8.
},
error: function(data) {
alert(data);
}
});
</script>
</body>
</html>
The JSON results look like the following:
{"title":"HEALTHPOINT TYEE CAMPUS","link":"http://www.healthpointchc.org","id":"tag:datawarehouse.hrsa.gov,2010-04-29:/8357","org":"HEALTHPOINT TYEE CAMPUS","address":{"street-address":"4424 S. 188TH St.","locality":"Seatac","region":"Washington","postal-code":"98188-5028"},"tel":"206-444-7746","category":"Service Delivery Site","location":"47.4344818181818 -122.277672727273","update":"2010-04-28T00:00:00-05:00"}
If I replace my URL with the Flickr API URL (http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?), I get back a valid JSON result that I am able to make use of.
I have successfully validated my JSON at JSONLint, so I've run out of ideas as to what I might be doing wrong.
Any thoughts?
Update: I had the client switch the content type to application/json. Unfortunately, I'm still experiencing the exact same problem. I also updated my HTML and included the live URL I've been working with.
Update 2: I just gave this a try in IE8 and it works fine. For some reason, it doesn't work in either Firefox 3.6.3 or Chrome 4.1.249.1064 (45376). I did notice a mistake with the data being returned (the developer is returning a collection of data, even for queries that will always return a single record), but it still baffles me why it doesn't work in other browsers.
It might be important to note that I am working from an HTML file on my local file system. I thought it might be a XSS issue, but that doesn't explain why Flickr works.
