我是一个新手，目前正在使用ESPN API，在查询API后，我希望它显示故事的标题，链接和图像。我只能显示标题，请问如何循环图像和链接？
<!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 中的开发人员工具获得的响应正文的一部分;
{
"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": []
},
您已经在此代码中完成了大部分操作：
$.each(data.headlines, function () {
var h2 = $("<h2/>").text(this.headline);
ol.append(h2)
});
this是对headlines数组中当前对象的引用，除了 headline 属性之外，它还具有 images 属性（即数组）。你只需要另一个嵌套循环来迭代该数组：
$.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
});
});
在你的完成函数中试试这个
.done(function( data ) {
data=JSON.parse(data)
//put your code
})
希望这有帮助...