2

Songkick APIを使用して次のギグの日付を一覧表示していますが、ここにあるコードを適応させました。これはJSONデータソースのコピーです。

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]イベントがリストされていない場合は、「現在、予約されているギグはありません。最新情報を入手してください」のように言ってください。

4

2 に答える 2

1

.（ドット）でjsonツリーにアクセスします

events = data.resultsPage.results.event;
于 2012-04-27T22:12:08.150 に答える
0 
  var events = data.resultsPage.results.event;
  $.each(events, function (i, item) {
        container.append($.nano(template, item));
    });

注：使用しているので$.nano、テンプレート変数内のショートコードを置き換えるために、jsonオブジェクトを反復処理する必要があります。

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));
        });
        }
    });
});
于 2012-04-27T22:41:50.910 に答える