Question

我正在使用Songkick API列出下一个演出日期，我已经调整了找到的代码here。这是JSON data source。

的副本

HTML：

<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.livequery.js" type="text/javascript"></script>
<script src="jquery.nano.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<ul id="concerts">Loading Next Gig...</ul>
</body>

application.js是：

$(document).ready(function () {
  var template = "<li>Our next gig is <a href='{uri}'>{displayName}</a></li>";
  var apikey = 'MY_API_KEY';
  var container = $("ul#concerts");
  $.getJSON('http://api.songkick.com/api/3.0/artists/253846/calendar.json?apikey=' + apikey + '&jsoncallback=?', function(data) {
    container.html("");
    events = data["resultsPage"]["results"]['event'];
if (events==null) {
      container.append($.nano());
}
else {
      container.append($.nano(template, events[0]));
}
  });
});

我想展示第一个列出的演出，

event.location.city
event.venue.displayName
event.start.date (in dd MMM format).

如果没有列出任何活动，我希望它说“目前没有预订的演出，请[a href="example.com"] click here [/a]获取最新信息。”

Answer 1

使用.（点）

访问json树

events = data.resultsPage.results.event;

Answer 2

演示： http://jsbin.com/ocoric

  var events = data.resultsPage.results.event;
  $.each(events, function (i, item) {
        container.append($.nano(template, item));
    });

注意：，因为您使用$.nano，您应该遍历json对象，以替换模板var中的短代码。

如果你想单独访问json属性，你应该像下面这样访问它：

var uri = events.uri;
var displayName = events.displayName;

您的完整代码将如下所示：

$(document).ready(function () {
    var template = "<li>Our next gig is <a href='{uri}'>{displayName}</a></li>";
    var apikey = 'MY_API_KEY';
    var container = $("ul#concerts");
    $.getJSON('http://api.songkick.com/api/3.0/artists/253846/calendar.json?apikey=' + apikey + '&jsoncallback=?', function (data) {
        container.html("");
        var events = data.resultsPage.results.event;
        if (events !== null) {
      $.each(events, function (i, item) {
            container.append($.nano(template, item));
        });
        }
    });
});

获取JSON数据 - 这里是新手

2 个答案: