Using JSONP with the flickr api

Question

i`ve got this JSONP response from the FLICKR api and i want to creat with the "link" as the source from each of them. i try doing this but nothing happend. and i have write a

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

the javascript:

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

then

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"
       }]}

Answer 1

There's a few problems with the original code:

• items[i] refers to i which is undefined since you're looping over a .
• The link attribute on each data item is a link to an HTML page containing the image, not a src for the image itself. You would want to use the media attribute which is a direct link to the image.
• img needs quotes when creating the image element
• You never add the created element to the 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>