使用JSONP的flickr api

-1

我已經從FLICKR api得到了這個JSONP響應，我想創建與「鏈接」作爲他們每個人的來源。我嘗試這樣做，但沒有發生。和我有寫一個使用JSONP的flickr api

<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/[email protected]/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/[email protected]/\">www.7aya.net<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/[email protected]/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": "[email protected] (www.7aya.net)", 
      "author_id": "[email protected]", 
      "tags": "" 
     }, 
     { 
      "title": "Bebiendo #Café #cafe #café #Oaxaca #Neurona #Neuroname http://Neurona.me", 
      "link": "https://www.flickr.com/photos/[email protected]/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/[email protected]/\">puente sur<\/a> posted a photo:<\/p> <p><a href=\"https://www.flickr.com/photos/[email protected]/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": "[email protected] (puente sur)", 
      "author_id": "[email protected]", 
      "tags": "square squareformat iphoneography instagramapp uploaded:by=instagram" 
     }]}

來源

2015-09-22 Fela Bird

有與原代碼的幾個問題：

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>

來源

2015-09-22 22:33:23 arcyqwerty

使用JSONP的flickr api

回答

相關問題