使用ESPN API，我该如何解析这个JSON？ [英] Working with the ESPN API,how can I parse this JSON?
问题描述
我是一名正在使用ESPN API的新手，在查询API之后，我希望它显示故事的标题，链接和图像。
I'm a newbie currently working with the ESPN API, after querying the API I want it to display the headline, link and image for a story. I have only been able to display the headline, please how do I loop the image and the link with it?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Work</title>
<script src="jquery-1.9.1.js"></script>
</head>
<body>
<script>
(function() {
var espnAPI = "http://api.espn.com/v1/sports/soccer/news/headlines/top/?apikey=*************&callback=?";
$.getJSON( espnAPI, {
format: "json"
})
.done(function( data ) {
var ol = $("<ol/>");
$.each( data.headlines, function() {
var h2 = $( "<h2/>" ).text(this.headline);
ol.append(h2)
});
$("body").append(ol);
});
})();
</script>
</body>
</html>
这是我从Chrome开发人员工具获得的响应正文的一部分;
This is a part of the response body I got from the developer tools in 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://espnfc.com/design05/images/2013/1020/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": []
},
推荐答案
已经在这段代码中完成了大部分工作：
You've already done most of it in this code:
$.each(data.headlines, function () {
var h2 = $("<h2/>").text(this.headline);
ol.append(h2)
});
这是是对当前对象的引用在标题数组中，除了标题属性外，它还有一个 images 属性（这是一个数组）。您只需要另一个嵌套循环来遍历该数组：
this is a reference to the current object in the headlines array, and in addition to the headline property it also has an images property (which is an array). You just need another nested loop to iterate over that array:
$.each(data.headlines, function () {
var h2 = $("<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
});
});
这篇关于使用ESPN API，我该如何解析这个JSON？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
