trouble parsing daylife json with jquery

Question

Does anyone know how I would be able to access the "name", "url", "headline", "timestamp", and "excerpt" from the array "article" using the $.getJSON?

http://freeapi.daylife.com/jsonrest/publicapi/4.8/topic_getRelatedArticles?topic_id=&name=business&start_time=2010-06-26&end_time=2010-07-03&sort=date&offset=&limit=10&source_filter_id=&include_scores=&include_image=&include_redundant=&accesskey=b030265d4c2b33652b6d519a10d0a6f0&signature=c683ddf5dee41d321b673fb1413f1f5c

Answer 1

Well, a JSON text simply contains a big ol' javascript object -that's why it's called "JavaScript Object Notation", so you can get any property with it's qualified name (like object.property). Reading the JSON response, let's assume you want to get the "name", "url", "headline", "timestamp", and "excerpt" for every object in the "article" array:

$.getJSON("http://freeapi.daylife.com/jsonrest/publicapi/4.8/topic_getRelatedArticles?topic_id=&name=business&start_time=2010-06-26&end_time=2010-07-03&sort=date&offset=&limit=10&source_filter_id=&include_scores=&include_image=&include_redundant=&accesskey=b030265d4c2b33652b6d519a10d0a6f0&signature=c683ddf5dee41d321b673fb1413f1f5c&callback=?", function(data){
       $.each(data.response.payload.article, function(index, value){
            alert("The name: "+ value.source.name);
            alert("The url: "+ value.source.url);
            alert("The headline: "+ value.headline);
            alert("The timestamp: "+ value.timestamp);
            alert("The excerpt: "+ value.excerpt);
         });
     });

Notice the callback parameter in the query string, that is a must if you'll using this code from any domain out of daylife.com, because the same origin policy enforced by most browsers won't let you do a call like this, because injecting javascript code from one page into another is a scary and dangerous thing, so you use the callback param to tell the browser "relax man, I know what I'm doing here"

Hope it helps!

Answer 2

It does not appear that daylife.com provides "jsonp" as a return type. This means that the javascript object in the body of the script tag is going to result in an error in the browser. And because of that you won't be able to get at the data within that script tag as far as I know.

If they did support jsonp they would look at that callback url and would return something like the following:

<script src="your API call here">
callbackFunction({response:"ok", data:[1,2,3]}) //this passes the data to callbackFunction
</script>

Instead of that they return this:

<script src="your API call here">
{response:"ok", data:[1,2,3]} //this is a parse error for the browser
</script>

A workaround is to proxy calls through your server to their server. Below is a C# sample of how it might be done. The ProxyHandler method is to just illustrate how ProxyJsonpRequest might be used from some web framework. It doesn't have a specific one in mind. The idea is that the javascript client will pass a parameter which specifies the remote url to which the server should request data. The server makes that request and returns that data to the client. The code below also only works for GET requests.

public string ProxyJsonpRequest(string remoteServer)
{
    HttpWebRequest req = HttpWebRequest.Create(remoteServer) as HttpWebRequest;
    HttpWebResponse resp = req.GetResponse() as HttpWebResponse;
    return new StreamReader(resp.GetResponseStream()).ReadToEnd();
}

public void ProxyHandler()
{
    string remote = this.Request.Params["url"];
    return new Response(data:ProxyJsonpRequest(remote), ContentType:"text/javascript");
}