获取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您应该遍历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)); 
     }); 
     } 
    }); 
});

来源

2012-04-27 22:41:50

使用其他响应和你的例子我已经改变了我的application.js沿线︰var template =“

我们的下一个演出是location: {location.city} , venue: {venue.displayName} on {start.date}

”;谢谢大家！ – redditor 2012-04-27 23:12:36

访问JSON树.（点）

events = data.resultsPage.results.event;

来源

2012-04-27 22:12:08 Starx

Starx您好，感谢回来给我这么快。我想我现在理解获取数据的方法 - 并且我假设我可以像这样创建新变量：venue = data.resultsPage.results.event.location.city，对于其他两个字符串我也是如此，但是如何我会追加这些变量，例如container.append（$。nano（template，events [0]，venue [0]））; ？谢谢。 – redditor 2012-04-27 22:23:40

获取JSON数据 - 新手在这里

回答

相关问题