I'm trying to figure out how to consume json URLs in the browser and render the data in my web pages using DOM. I am not getting a consistent or predictable response.
I found a JSON URL at Google Calendar which shows the json response in my browser if I just type the URL in the address bar.
I found another JSON URL at business.gov which shows a different json response in my browser if I just type the URL in the address bar. .
I then tried to use jQuery to issue $.ajax calls to consume and display both of these JSON resources.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
htmlobj=$.ajax(
{url:"http://www.google.com/calendar/feeds/[email protected]/public/full?alt=json",
async:false}
);
if (jQuery.isEmptyObject(htmlobj.responseText)===true) {
alert("htmlobj.responseText is empty");
} else {
alert("htmlobj.responseText has stuff in it");
}
$("#myDiv").html(htmlobj.responseText).fadeIn();
htmlobj1=$.ajax(
{url:"http://api.business.gov/geodata/city_county_links_for_state_of/CA.json",
async:false,
dataType:'text',
});
if (jQuery.isEmptyObject(htmlobj1.responseText)===true) {
alert("htmlobj1.responseText is empty");
} else {
alert("htmlobj1.responseText has stuff in it");
}
$("#myGovDiv").html(htmlobj1.responseText).fadeIn();
});
</script>
</head>
<body>
<h3>Google Calendar - json only</h3>
<div id="myDiv" style="display:none"></div>
<h3>Business.Gov</h3>
<div id="myGovDiv" style="display:none"></div>
</body>
The Google Calendar JSON resource was consumed fine, but the business.gov JSON resource did not even come back in the response. (I checked with Firebug, and it returned HTTP code 200 with nothing in the response text).
How is it that both JSON URLs returned good JSON data in the browser, but only the Google Calendar URL could be consumed by jQuery.ajax while the business.gov URL could not be consumed by jQUery.ajax?
EDIT - June 19, 2010, 6:36 EST - Thanks @Juan Manuel and @TheJuice. I tried jsonp...here is what I got.
If I change the call to the following, I am able to get the browser to stop blocking the response from api.business.gov, but I can't get at the data (e.g. htmlobj2 is a nil)
htmlobj2=$.ajax(
{url:"http://api.business.gov/geodata/city_county_links_for_state_of/CA.json",
async: false,
dataType: 'jsonp',
success: function(data, textStatus) {
alert("Success");
$('#myDiv').html("Your data: " );
},
error: function ( XMLHttpRequest, textStatus, errorThrown){
alert('error');
}
}
);
Whether I use dataType of 'jsonp' or 'script', I get the same result. htmlobj2 is nil, but the response header has the entire json data string. Furthermore, if I try to bind a callback function to the .ajax call with "data" as a parameter, that "data" parameter is also a nil object. Furthermore, neither the success or failure handler gets called.
How can I extract this JSON data from the response string and present it on my web page?
EDIT - June 22, 2010, 11:17 AM
I found a Ruby script and tweaked it to try and consume the URLs. I ran it in interactive Ruby (irb).
require 'rubygems'
require 'json'
require 'net/http'
url = "http://api.business.gov/geodata/city_county_links_for_state_of/CA.json"
resp = Net::HTTP.get_response(URI.parse(url))
data = resp.body
result = JSON.parse(data)
result.each{|entry| p entry["name"] + "," + entry["full_county_name"] }
I was able to use a similar Ruby script to consume the Google Calendar URL as well.
Bottom line? I was able to consume both JSON resources (api.business.gov and Google Calendar) using Ruby, but only the Google Calendar resource using Javascript/jQuery in my browser.
I'd appreciate any insight I can get. It doesn't seem clear from any of the documentation on the web or the API descriptions why the Google Calendar feed works in the browser no matter what, but the api.business.gov feed does not work in the browser using JSON or JSONP.