将 JSONP 与 flickr api 一起使用答案

【问题标题】：Using JSONP with the flickr api将 JSONP 与 flickr api 一起使用
【发布时间】：2015-12-20 02:07:29
【问题描述】：

我从 FLICKR api 得到了这个 JSONP 响应，我想用“链接”作为它们每个的源来创建。我尝试这样做，但什么也没发生。我写了一个

<script src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"></script>

javascript：

function jsonFlickrFeed(data)
{
  for(var a = 0 ; a < 5 ; a++)
  {
    var img = document.createElement(img);
    img.src = data.items[i].link;
  }
}

然后

jsonFlickrFeed({
        "title": "Uploads from everyone",
        "link": "https://www.flickr.com/photos/",
        "description": "",
        "modified": "2015-09-22T22:17:01Z",
        "generator": "https://www.flickr.com/",
        "items": [
       {
            "title": "بالصور| أفضل الفنادق في مراكش",
            "link": "https://www.flickr.com/photos/131615921@N08/21014053604/",
            "media": {"m":"https://farm6.staticflickr.com/5645/21014053604_251062f1df_m.jpg"},
            "date_taken": "2015-09-22T15:17:01-08:00",
            "description": " <p><a href=\"https://www.flickr.com/people/131615921@N08/\">www.7aya.net<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/131615921@N08/21014053604/\" title=\"بالصور| أفضل الفنادق في مراكش\"><img src=\"https://farm6.staticflickr.com/5645/21014053604_251062f1df_m.jpg\" width=\"240\" height=\"149\" alt=\"بالصور| أفضل الفنادق في مراكش\" /><\/a><\/p> <p>قدم موقع التلغراف في قسمه المخصص للسفر قائمة بأفضل الفنادق في مدينة مراكش المغربية، وقد شملت القائمة الفنادق الفاخرة و الفنادق الرخيصة والفنادق الصديقة للعائلة، وبينما تظهر المزيد من الفنادق الجديدة في جميع أنحاء المدينة، تم تحويل أكثر من 200 من رياض المدينة إلى بيوت الضيافة، وفيما يلي 10 من أفض... <br /> <br /> <a href=\"http://www.7aya.net/2015/09/23/%d8%a8%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a3%d9%81%d8%b6%d9%84-%d8%a7%d9%84%d9%81%d9%86%d8%a7%d8%af%d9%82-%d9%81%d9%8a-%d9%85%d8%b1%d8%a7%d9%83%d8%b4/\" rel=\"nofollow\">www.7aya.net/2015/09/23/%d8%a8%d8%a7%d9%84%d8%b5%d9%88%d8...<\/a><\/p>",
            "published": "2015-09-22T22:17:01Z",
            "author": "nobody@flickr.com (www.7aya.net)",
            "author_id": "131615921@N08",
            "tags": ""
       },
       {
            "title": "Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me",
            "link": "https://www.flickr.com/photos/46158081@N07/21014054554/",
            "media": {"m":"https://farm6.staticflickr.com/5699/21014054554_27b54fc07f_m.jpg"},
            "date_taken": "2015-09-22T17:17:04-08:00",
            "description": " <p><a href=\"https://www.flickr.com/people/46158081@N07/\">puente sur<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/46158081@N07/21014054554/\" title=\"Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me\"><img src=\"https://farm6.staticflickr.com/5699/21014054554_27b54fc07f_m.jpg\" width=\"240\" height=\"240\" alt=\"Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me\" /><\/a><\/p> ",
            "published": "2015-09-22T22:17:04Z",
            "author": "nobody@flickr.com (puente sur)",
            "author_id": "46158081@N07",
            "tags": "square squareformat iphoneography instagramapp uploaded:by=instagram"
       }]}

【问题讨论】：

标签： javascript html json jsonp

【解决方案1】：

原代码有几个问题：

items[i] 指的是i，即undefined，因为您正在循环a。
每个数据项上的link 属性是指向包含图像的HTML 页面的链接，而不是图像本身的src。您可能需要使用media 属性，它是图片的直接链接。
img 创建图片元素时需要引号
您永远不会将创建的元素添加到 DOM 中

http://jsfiddle.net/rmuctecp/

<script>
function jsonFlickrFeed(data)
{
  for(var i = 0 ; i < 5 ; i++)
  {
    var img = document.createElement("img");
    img.src = data.items[i].media.m;
    document.body.appendChild(img);
  }
}
</script>
<script src = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"></script>

【讨论】：