我正在尝试在Songkick事件详细信息API的Performance部分下获取Artist的URI和DisplayName。
来自其网站的示例数据结构：
{
"resultsPage": {
"results": {
"event": [
{
"id": 11129128,
"type": "Concert",
"uri": "http://www.songkick.com/concerts/11129128-wild-flag-at-fillmore?utm_source=PARTNER_ID&utm_medium=partner",
"displayName": "Wild Flag at The Fillmore (April 18, 2012)",
"start": {
"time": "20:00:00",
"date": "2012-04-18",
"datetime": "2012-04-18T20:00:00-0800"
},
"performance": [
{
"artist": {
"uri": "http://www.songkick.com/artists/29835-wild-flag?utm_source=PARTNER_ID&utm_medium=partner",
"displayName": "Wild Flag",
"id": 29835,
"identifier": []
},
"displayName": "Wild Flag",
"billingIndex": 1,
"id": 21579303,
"billing": "headline"
}
],
"location": {
"city": "San Francisco, CA, US",
"lng": -122.4333,
"lat": 37.78424
},
"venue": {
"id": 6239,
"displayName": "The Fillmore",
"uri": "http://www.songkick.com/venues/6239-fillmore?utm_source=PARTNER_ID&utm_medium=partner",
"lng": -122.4333,
"lat": 37.78424,
"metroArea": {
"uri": "http://www.songkick.com/metro_areas/26330-us-sf-bay-area?utm_source=PARTNER_ID&utm_medium=partner",
"displayName": "SF Bay Area",
"country": {
"displayName": "US"
},
"id": 26330,
"state": {
"displayName": "CA"
}
}
},
"status": "ok",
"popularity": 0.012763
}
]
},
"totalEntries": 24,
"perPage": 50,
"page": 1,
"status": "ok"
}
}
我正在使用AJAX和jQuery。在我的HTML和Javscript下面。我可以成功访问场地名称;但是，当尝试在Performance数组中获取数据时，它会中断并且没有任何返回。
任何帮助都将不胜感激。
HTML：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Mesh.fm</a>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Mesh.fm</h1>
<p>The best way to find new music happening near you!</p>
<button class="btn btn-warning btn-large" id="shows">Listen to NYC </button>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span2">
<h2>Type</h2>
<ul id="artistname"></ul>
</div>
<div class="span10">
<h2>Show</h2>
<ul id="localshows"></ul>
</div>
</div>
<hr>
</div> <!-- /container -->
</body>
</html>
Javscript文件：
$(document).ready(function() {
$.ajax({
url: "http://api.songkick.com/api/3.0/metro_areas/7644/calendar.json?&apikey={your_api_key}&per_page=all&max_date=2013-06-30&jsoncallback=?",
dataType: "jsonp",
success: function(data){
$.each(data["resultsPage"]["results"]["event"], function(i, entry){
$("#localshows").append('<li><a href="' + entry.uri+'">'+entry.venue.displayName+'</a></li>');
$("#artistname").append('<li><a href="' + entry.uri+'">'+entry["performance"][0]["artist"]["displayName"]+'</a></li>');
});
}
});
});
答案 0 :(得分：0)
查看来自API的响应，并非所有事件都在artist数组中具有performance属性，您只需使用以下命令检查性能数组的长度：
$("#localshows").append('<li><a href="' + entry.uri + '">' + entry.venue.displayName + '</a></li>');
if (entry.performance.length) {
$("#artistname").append('<li><a href="' + entry.uri + '">' + entry["performance"][0]["artist"]["displayName"] + '</a></li>');
}
如果您正在考虑以这种方式构建html，这是另一个例子（尽管您应该考虑像淘汰赛这样的模板解决方案，或者如果您经常这样做的话：>
$.each(data.resultsPage.results.event, function (i, event) {
var showsContainer = $('#localshows');
var artistContainer = $('#artistname');
var showListItem = $('<li/>');
var showAnchor = $('<a/>').attr('href', event.uri).html(event.venue.displayName);
showListItem.append(showAnchor);
showsContainer.append(showListItem);
if (event.performance.length) {
var artistListItem = $('<li/>');
var artistAnchor = $('<a/>').attr('href', event.uri).html(event.performance[0].artist.displayName);
artistListItem.append(artistAnchor);
artistContainer.append(artistListItem);
}
});
PS。从之前的评论中删除您的api密钥并在可能的情况下重置它;）