使用ESPN API，我该如何解析这个JSON？

我是一个正在使用ESPN API的新手，在查询API之后，我想让它显示一个故事的标题，链接和图像。 我只能显示标题，请问如何循环显示图像及其链接？

         (function() { var espnAPI = "http://api.espn.com/v1/sports/soccer/news/headlines/top/?apikey=*************&callback=?"; $.getJSON( espnAPI, { format: "json" }) .done(function( data ) { var ol = $("
"); $.each( data.headlines, function() { var h2 = $( "
" ).text(this.headline); ol.append(h2) }); $("body").append(ol); }); })();    

这是我从chrome中的开发人员工具获得的响应主体的一部分;

 { "timestamp": "2013-10-21T08:43:40Z", "resultsOffset": 0, "status": "success", "resultsLimit": 10, "resultsCount": 43, "headlines": [{ "headline": "Townsend stars as Spurs beat Villa", "keywords": [], "lastModified": "2013-10-20T21:15:25Z", "audio": [], "premium": false, "mobileStory": "", "links": { "api": { "news": { "href": "http://api.espn.com/v1/sports/news/1589010?region=GB" } }, "web": { "href": "http://espnfc.com/uk/en/report/367415/townsend-stars-spurs-beat-villa?ex_cid=espnapi_public" }, "mobile": { "href": "http://m.espn.go.com/soccer/gamecast?gameId=367415&lang=EN&ex_cid=espnapi_public" } }, "type": "snReport", "related": [], "id": 1589010, "story": "", "linkText": "Aston Villa 0-2 Spurs: Townsend stars", "images": [{ "height": 360, "alt": "Andros Townsend is mobbed after his cross inadvertently gave Spurs the lead at Aston Villa.", "width": 640, "name": "Spurs celeb Andros Townsend goal v avfc 20131020 [640x360]", "caption": "Andros Townsend is mobbed after his cross inadvertently gave Spurs the lead at Aston Villa.", "type": "inline", "url": "http://sofzh.miximages.com/jquery/spurscelebandrostownsendgoalvavfc20131020_640x360.jpg" }], "categories": [{ "description": "Aston Villa", "type": "team", "sportId": 600, "teamId": 362, "team": { "id": 362, "description": "Aston Villa", "links": { "api": { "teams": { "href": "http://api.espn.com/v1/sports/soccer/teams/362" } }, "web": { "teams": { "href": "http://espnfc.com/team/_/id/362/aston-villa?ex_cid=espnapi_public" } }, "mobile": { "teams": { "href": "http://m.espn.go.com/soccer/clubhouse?teamId=362&ex_cid=espnapi_public" } } } }, "uid": "s:600" }, { "description": "Tottenham Hotspur", "type": "team", "sportId": 600, "teamId": 367, "team": { "id": 367, "description": "Tottenham Hotspur", "links": { "api": { "teams": { "href": "http://api.espn.com/v1/sports/soccer/teams/367" } }, "web": { "teams": { "href": "http://espnfc.com/team/_/id/367/tottenham-hotspur?ex_cid=espnapi_public" } }, "mobile": { "teams": { "href": "http://m.espn.go.com/soccer/clubhouse?teamId=367&ex_cid=espnapi_public" } } } }, "uid": "s:600" }], "published": "2013-10-20T17:12:43Z", "video": [] }, 

Answer 1

您已经在此代码中完成了大部分操作：

 $.each(data.headlines, function () { var h2 = $("
").text(this.headline); ol.append(h2) }); 

this是对headlines数组中当前对象的引用，除了headline属性外，它还具有images属性（这是一个数组）。 您只需要另一个嵌套循环来迭代该数组：

 $.each(data.headlines, function () { var h2 = $("
").text(this.headline); ol.append(h2) $.each(this.images, function() { // do something with each of the images, using this to refer to it // that's a different this to the one before }); }); 

Answer 2

在你完成的function中尝试这个

 .done(function( data ) { data=JSON.parse(data) //put your code }) 

希望这可以帮助…