JSONデータを取得する - 初心者

Songkick APIを使用して次のギグの日付を表示しています。コードはhereです。これはJSON data sourceのコピーです。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]をアップしてください今日までの情報。

出典

2012-04-27 redditor

デモ：http://jsbin.com/ocoric

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

注：$.nanoを使用しているので、テンプレートvar内のショートコードを置き換えるために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-27 22:41:50

他の回答とあなたの例を使用して、application.jsを次の行に沿って変更しました：var template = "

次のライブはlocation: {location.city} , venue: {venue.displayName} on {start.date}

"です。みんなありがとう！ – redditor

アクセス.（ドット）とJSONツリー

events = data.resultsPage.results.event;

出典

2012-04-27 22:12:08 Starx

こんにちはStarx、私に戻って来てくれてありがとうそんなに早く。私は今データを取得するためのメソッドを理解していると思う - 私はちょうどそう新しい変数を作ることができます：venue = data.resultsPage.results.event.location.cityと私は後の他の2つの文字列の同じですが、どのように私はそれらの変数を追加しますか？例えば、container.append（$。nano（template、events [0]、venue [0]））; ？ありがとう。 – redditor

JSONデータを取得する - 初心者

答えて

関連する問題