Problem Fetching JSON Result with jQuery in Firefox and Chrome (IE8 Works)

Posted by senfo on Stack Overflow See other posts from Stack Overflow or by senfo
Published on 2010-04-29T13:52:39Z Indexed on 2010/05/01 22:47 UTC
Read the original article Hit count: 257

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JSON