用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

回答

相关问题