Trying to read the Google Calender JSON Data using JQuery

Question

I am trying to read the google calendar events from the JSON response but nothing happens. I have tried the code from here but that too is not working. I am adding the code to my CMS and when I check on the front end, nothing appears. I even tried running this fiddle http://jsfiddle.net/bGdhD/ but this also doesn't provide any response.

My google calendar URL is

https://www.google.com/calendar/feeds/varun.luthra.72%40gmail.com/public/full?alt=json-in-script&max-results=25&singleevents=false&futureevents=true&sortorder=descending&orderby=starttime

<script>
var event = '';

var gclaData = 'https://www.google.com/calendar/feeds/varun.luthra.72%40gmail.com/public/full?alt=json-in-script&max-results=25&singleevents=false&futureevents=true&sortorder=descending&orderby=starttime';


$.getJSON(gclaData,function(data){
    $.each(data.feed.entry, function(i, entry){
        event += '<div class="eventHolder">'; 
        event += '<div class="eventTime">'+ entry.gd$where[0].startTime+"</div>";
        event += '<div class="eventName">'+ entry.title.$t + "</div>";
        event += '<div class="eLink">'+ entry.link[0].href + "</div>";
        event += '</div>';
    });
    $('#output').html(event);
});
</script>

<div id="output"></div>

Also, could this be a cross domain issue?

MrCode MrCode · Accepted Answer · 2013-10-14T09:36:09

It's not a cross domain problem, because the response includes the Cross Origin Resource Sharing header:

access-control-allow-origin:*

The problem is the response is a JSONP response and so includes a callback function. This makes it invalid JSON (unless you strip the callback).

Option 1: If you set &callback=? in the URL, jQuery will treat the response as JSONP:

var gclaData = 'https://www.google.com/calendar/feeds/varun.luthra.72%40gmail.com/public/full?alt=json-in-script&max-results=25&singleevents=false&futureevents=true&sortorder=descending&orderby=starttime&callback=?';

Option 2: Use $.ajax() and strip the callback:

gdata.io.handleScriptLoaded(

Also strip the closing parenthesis and semicolin );. This leaves you with a valid JSON response, which needs to be decoded from a string to a Javascript object using JSON.parse() or similar.

Also, there doesn't appear to be an entry array or object in the response, so you need to modify your success event accordingly.

Last point, this will not work:

entry.gd$where[0]

If the variable name has special characters, use the [] notation:

entry['gd$where'][0]

Trying to read the Google Calender JSON Data using JQuery

1 Answers