2016-12-31 42 views
1

我正在尝试使用我的请求url中的&callback= parameter返回一个jsonp对象的方式调用BandsInTown api。我很困惑这是如何与Jquery调用结合使用的。我的代码看起来是这样,但并不做任何事情:如何使用api的jsonp回调函数

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); 
      } 
    } 


} 

或者,如果有一种方法可以做到这一点没有jQuery的?这是api文档。除了响应被发送到您指定的回调函数这一事实之外,没有太多关于此的内容。 https://www.bandsintown.com/api/requests#artists-events预先感谢您的任何帮助或建议!

回答

1

JSONP回调函数与您要调用的函数(bandsInInfo)不同。当你将dataType定义为'jsonp'时,jQuery将为你管理回调函数。所以,我会从查询字符串中删除最后一个参数。

您应该添加成功和错误的属性到$阿贾克斯选项:

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) 
    } 
}); 

}