Using JSONP with the flickr api

Question

我已经从FLICKR api得到了这个JSONP响应，我想用"link"作为每个响应的源来创建。我试着这样做，但什么也没发生。我写了一个

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

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": "[e-mail] (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": "[e-mail] (puente sur)",
            "author_id": "46158081@N07",
            "tags": "square squareformat iphoneography instagramapp uploaded:by=instagram"
       }]}

Answer 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>