用jQuery解析JSON

Question

嘿。我正在尝试使用jQuery将一些JSON解析成HTML。我已经检查过我的API请求是否有效，确实有效。

我想它在附加HTML时卡住了。

$('button').click(function(){
    $.getJSON('http://api.songkick.com/api/3.0/events.json?apikey=MY_API_KEY&location=ip:94.228.36.39', function(data) {
        $('.json').html('<p>' + data.location + '</p>' + '<p>' + data.uri + '</p>');
    });
});

getJson以以下格式返回大量数据，但我似乎无法将其解析为超文本标记语言。

{
    "resultsPage": {
        "totalEntries": 99,
        "page": 1,
        "results": {
            "event": [
                {
                    "type":"Concert",
                    "location": {
                        "city":"Huddersfield, UK"
                        ,"lng":-1.78333,
                        "lat":53.65},
                    "popularity":0.0,
                    "status":"ok",
                    "uri":"http:\/\/www.songkick.com\/concerts\/4993456-barbirolli-quartet-at-st-pauls-hall?utm_source=2251&utm_medium=partner",
                    "venue":{
                        "uri":"http:\/\/www.songkick.com\/venues\/156338-st-pauls-hall?utm_source=2251&utm_medium=partner",
                        "lng":-1.78333,
                        "displayName":"St. Paul's Hall",
                        "id":156338,
                        "metroArea": etc......

Answer 1

问题是响应没有location或uri属性。

$('button').click(function(){
    $.getJSON('http://api.songkick.com/api/3.0/events.json?...', function(data) {
        // only guessing based on the information provided
        var events = data.resultsPage.results.event;
        for (var i = 0, l = events.length; i < l; i++) {
            $('.json').append('<p>' + events[i].location.city + '</p>'
                + '<p>' + events[i].uri + '</p>');
            });
        }
});

Answer 2

正如我所看到的，问题在于JSON的结构与您试图评估的结构不同。它嵌套得更深。所以你需要的不是data.location，而是像data.resultsPage.results.event[0].location这样的东西。

这意味着，您很可能只是在代码中遗漏了data.resultsPage.results.event上的循环。

Answer 3

您举的例子中的JSON对象有好几层。为了到达那个位置，你必须在里面筑巢-

var events = data['resultsPage']['results']['event'];
//Actually an array of events
var location = events[0]['location'];
...