Question

With the help of a few other stack users I have come up with this:

http://jsfiddle.net/9ywLq/

I want to use an external json file & come up with something similar to this:

http://jsfiddle.net/RCB9M/

The file I am linking to at the moment is: http://www.lofiz.co.uk/afba/songkickwidget/testjsondata.json but this will ultimately change to a Songkick JSON output.

Answer 1

You are a victim of the same-origin policy. The browser will by default block JSON that is fetched cross-domain for security reasons. If you need to get data cross-domain, you will either have to implement a server-side proxy, or use JSONP, if the data is provided in that format as well. If the source doesn’t provide data in JSONP, I believe you could utilize YQL to convert it.

Resource on JSONP: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

Update: Your URL would be called like this:

​$(function(){
  var url = "https://api.songkick.com/api/3.0/artists/253846/calendar.json?apikey=HlgKnFaq9qYO1h9T&jsoncallback=?";
  $.getJSON(url, function(data){
    // Do what you want to do with the return data within this callback
    console.log(data);        
  });
});​

Update 2:

I have updated your JSFiddle to work with getJSON(). I also took the liberty to make a few other changes:

1. I modified how you defined your array of month-names, to make it more readable.
2. .getDay() in JavaScript is used to return the day of the week (0 = sunday, 1 = monday and so on), as I believe you want the day of the month, you should use .getDate() instead. See my JSFiddle.