Question

I’m having issues gathering data using JSON on the Songkick API. I’m really new to jQuery and Javascript so please forgive me if this looks really crude. I’ve spent some time trying to research the proper syntax I need but I just keep ending back up at square one.

What im trying to do is make the request using jQuery and then add the results into my HTML in an list. Any help anyone can give me would be fantastic.

Here’s what I have so far.

<script>
$.getJSON("http://api.songkick.com/api/3.0/artists/3950031/calendar.json?apikey={apikey}",
function(data){
var events = data['resultsPage']['results']['event'];
for (var i=0;i < events.length; i++) {


$("#events").append('<li><a
href="'+events[i]['uri'])+'">'+events[i]['displayName']+'</a></li>');
}

}); 

</script>

Thanks!

Answer 1

sorry i took so long to get back, i left the office about the time you replied last night

here is what I came up with:

  $(document).ready(function() {
  $.ajax({
  url:  "http://api.songkick.com/api/3.0/artists/480448/calendar.json?apikey=APIKEY&jsoncallback=?",
  dataType:   "jsonp", // <== JSON-P request
  success:    function(data){ 
    $.each(data["resultsPage"]["results"]["event"], function(i, entry){
        $("#events").append('<li><a href="' + entry.uri+'">'+entry.displayName +'</a></li>');
    });
  }     
  });
  });

I think the issue you were having was with JSON, JSON is subject to the same origin policy (which I read about on here ( $.getJSON not working ). Instead you have to use JSON-P adding

   &jsoncallback=?

at the end of the URL tells Songkick to send it as a JSON-P request. This was the main issue.

Other issues included minor coding errors: there was an extra ( in your append string, I also used $.Each as appose to a for loop but either would work, hope this helps and you may want to take your API code off if the fix worked 🙂 Just change API Key to your key and it should be fine (i also changed the band to chevelle as the other one had no entries)