用jQuery解析JSON

嘿。我正嘗試使用jQuery將一些JSON解析爲HTML。我檢查過我的API請求是否正常工作，它是。用jQuery解析JSON

我認爲在追加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收益按以下格式數據的加載，但我似乎無法把它解析爲HTML。

{ 
    "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......

來源

2010-10-25 Alex Vince

你把它扔在http://www.jsonlint.com/？另外，你看過Firebug錯誤控制檯和網絡選項卡嗎？ – Boldewyn 2010-10-25 09:21:52

的問題是，所述響應不具有屬性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>'); 
      }); 
     } 
});

來源

2010-10-25 09:23:45

這仍然不起作用！ – 2010-10-25 09:36:52

查看我的更新答案，以示例顯示Ryan的示例應該有效 – mplungjan 2010-10-25 11:29:53

正如我所看到的，問題在於，您的JSON結構與您嘗試評估的結構不同。它嵌套得更深。所以，而不是data.location你將需要像data.resultsPage.results.event[0].location。

這意味着，很可能你只是錯過了代碼中的data.resultsPage.results.event循環。

來源

2010-10-25 09:25:21 Boldewyn

你給出的JSON對象是一個例子，它有很深的級別。要到達的位置，你將不得不窩內 -

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

來源

2010-10-25 09:25:33

新增瑞安的功能給你看它與給定的這麼別的東西JSON工作丟失 - 這裏是純JS版

<div id="eventDiv"></div> 
<script> 
var data = { 
    "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 
      } 
     } 
     ] 
    } 
    } 
} 
window.onload=function() { 
    var events = data.resultsPage.results.event; 
    for (var i = 0, l = events.length; i < l; i++) { 
    document.getElementById('eventDiv').innerHTML='<p>' + events[i].location.city + '</p><p>' + events[i].uri + '</p>'; 
    } 
} 

</script>

來源

2010-10-25 09:36:34 mplungjan

我在這裏遇到同樣的問題。問題在於嵌套數據的語法。

我改變：

+ events.location.city +

到：

+ events.location['city'] +

對於每個被嵌套在該所要求的字段。對於非嵌套，只需刪除括號：

+ events.uri +

來源

2012-04-04 11:11:27 shovelshed

用jQuery解析JSON

回答

相關問題