Javascript 如何在Flickr API中只显示多个图像字段的一个图像？

我的代码在此codepen.io链接中：

当我在搜索栏中输入一个随机城市名称时，代码使用城市名称作为标记，通过Flickr的API查找相关图像

Flickr API链接：

链接在其回调中提供以下格式的响应：

    jQuery31009750922804659352_1477691108443({
    "title": "Recent Uploads tagged boston",
    "link": "http://www.flickr.com/photos/tags/boston/",
    "description": "",
    "modified": "2016-10-28T22:36:35Z",
    "generator": "http://www.flickr.com/",
    "items": [
   {
        "title": "Wilmington, Vermont.....on the way to Boston",
        "link": "http://www.flickr.com/photos/mishlove1/30327590520/",
        "media": {"m":"http://farm6.staticflickr.com/5695/30327590520_a7e599c963_m.jpg"},
        "date_taken": "2016-10-03T07:44:18-08:00",
        "description": " <p><a href=\"http://www.flickr.com/people/mishlove1/\">mishlove1<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/mishlove1/30327590520/\" title=\"Wilmington, Vermont.....on the way to Boston\"><img src=\"http://farm6.staticflickr.com/5695/30327590520_a7e599c963_m.jpg\" width=\"240\" height=\"160\" alt=\"Wilmington, Vermont.....on the way to Boston\" /><\/a><\/p> <p>Wilmington, Vermont......on the road and on the way to Boston<\/p>",
        "published": "2016-10-28T22:36:35Z",
        "author": "nobody@flickr.com (mishlove1)",
        "author_id": "45049047@N04",
        "tags": "boston canada canon canon7d cityofboston jamaicaplain michaelishlove roadtrip usa"
   },
   {
        "title": "Wilmington, Vermont.....on the way to Bosto",
        "link": "http://www.flickr.com/photos/mishlove1/30510706342/",
        "media": {"m":"http://farm6.staticflickr.com/5720/30510706342_b9de69d877_m.jpg"},
        "date_taken": "2016-10-03T08:09:03-08:00",
        "description": " <p><a href=\"http://www.flickr.com/people/mishlove1/\">mishlove1<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/mishlove1/30510706342/\" title=\"Wilmington, Vermont.....on the way to Bosto\"><img src=\"http://farm6.staticflickr.com/5720/30510706342_b9de69d877_m.jpg\" width=\"240\" height=\"160\" alt=\"Wilmington, Vermont.....on the way to Bosto\" /><\/a><\/p> <p>Wilmington, Vermont.....on the road and on the way to Boston<\/p>",
        "published": "2016-10-28T22:36:34Z",
        "author": "nobody@flickr.com (mishlove1)",
        "author_id": "45049047@N04",
        "tags": "boston canada canon canon7d cityofboston jamaicaplain michaelishlove roadtrip usa"
   },....


 })

jQuery31009750922804659352_1477691108443({
“标题”：“最近上传的标记为boston”，
“链接”：http://www.flickr.com/photos/tags/boston/",
“说明”：“，
“修改”：“2016-10-28322:36:35Z”，
“生成器”：http://www.flickr.com/",
“项目”：[
{
“标题”：“佛蒙特州威尔明顿……在去波士顿的路上”，
“链接”：http://www.flickr.com/photos/mishlove1/30327590520/",
“媒体”：{“m”：”http://farm6.staticflickr.com/5695/30327590520_a7e599c963_m.jpg"},
“拍摄日期”：“2016-10-03T07:44:18-08:00”，
“说明”：“”
].加入（“”）；
返回初始或上一个；
}, '');
$（“#quotediv”）.html（photosHTML）；
};

但我不知道如何仅显示API链接中的第一个图像：

---

我尝试将“CurrentValue.link”和“CurrentValue.media.m”替换为“respond.items[0].link”和“respond.items[0].media.m”，但它只重复图像，而不是打印Flickr API链接中的第一个（也是唯一一个）图像。

response

中有20个项目

“快速和肮脏”的方式是改变：

respond.items.reduce(function...

致：

这样，您只需要获取数组的第一个元素并在其上运行函数

另一个选项是进行此更改：

var photo = respond.items[0]
var photoHTML = '<a href="'+ photo.link +'"><img src="'+ photo.media.m +'"></a>'
$('#quotediv').html(photoHTML);

var photo=respond.items[0]
var photoHTML=''
$（'quotediv'）.html（photoHTML）；

---

这样，您就不用在数组上运行函数，只需拍摄第一张照片并从中创建所需的html。

您可以使用

respond.items[0]

respond.items.slice(0,1).reduce(function...

var photo = respond.items[0]
var photoHTML = '<a href="'+ photo.link +'"><img src="'+ photo.media.m +'"></a>'
$('#quotediv').html(photoHTML);