CODEWITHSUNDEEP
javascriptjqueryjsonp
crispEtomE
crispEtomE

Reputation: 123

How to use a jsonp callback function with api

I'm trying to make a call to the BandsInTown api in a way that it returns a jsonp object using the &callback= parameter in my request url. I'm confused on how this works in conjunction with the Jquery call. My code looks like this but doesn't do anything:

    var shows=[];
    var locat = "Denver,CO";
    var artists = ["Twenty One Pilots", "Atmosphere", "Vince Staples", "STRFKR", "Rainbow Kitten Surprise", "Mac Demarco", "Hippo Campus", "Drake", "John Legend", "Rihanna", "Flying Lotus", "MGMT", "Jason Derulo", "M83", "Bon Iver", "Childish Gambino"];    
    for (var i = 0; i < artists.length; i++) {
        parseEvent(artists[i], locat, shows);    
    }

function parseEvent(artist, locat, showsObject) {
    var url = 'http://api.bandsintown.com/artists/' + artist + '/events/search.json?api_version=2.0&app_id=music_matcher&location=' + locat + '&radius=150&callback=bandsInInfo';

    $.ajax({
       url: url,
       dataType: 'jsonp',
       jsonpCallback: 'bandsInInfo'
    });
}

function bandsInInfo(data) {
alert("workingBandy");
alert(data);
    var numEvents = Object.keys(data).length;       
    for (var j = 0; j < numEvents; j++) {

        if (!(data[j].venue.latitude == null && data[j].venue.latitude == 'undefined')) {
            var element = 
             { 
                "location": {"latitude": data[j].venue.latitude, "longitude": data[j].venue.longitude},
                "artist": data[j].artists[0].name,
                "venue_name": data[j].venue.place,
                "date": data[j].datetime,
                "ticket_url": data[j].ticket_url,
                "ticket_status": data[j].ticket_status,
                "title": data[j].title
            };

            showsObject.push(element);
            }   
    }


}

Or if there is a way to do this without Jquery? This is the api documentation. Not much is said about this besides the fact that the response is sent to the callback function that you specify. https://www.bandsintown.com/api/requests#artists-events Thank you in advance for any help or advice!!

Upvotes: 1

Views: 1320

Answers (1)

SeanOlson
SeanOlson

Reputation: 379

The JSONP callback function is different from the function you want to call (bandsInInfo). jQuery will manage the callback function for you when you define the dataType as 'jsonp'. So, I would remove that last parameter from your query string.

You should add the success and error properties to your $.ajax options:

function parseEvent(artist, locat, showsObject) {
    var url = 'http://api.bandsintown.com/artists/' + artist + '/events/search.json?api_version=2.0&app_id=music_matcher&location=' + locat + '&radius=150';

    $.ajax({
       url: url,
       dataType: 'jsonp',
       success: function(data){
         bandsInInfo(data);
       },
       error: function(err){
         console.log(err)
       }
    });
}

Upvotes: 1

Related Questions