I am playing with some JSON data. With following JavaScript, I can retrieve some links.

(function() { var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.getJSON( flickrAPI, { id: "132455232@N07", lang: "en-us", format: "json" }) .done(function( data ) { $.each( data.items, function( i, item ) { console.log(data.items[i]['link']); if ( i === 5 ) { return false; } }); }); })(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

And with the following JavaScript I can get some images:

(function() { var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.getJSON( flickrAPI, { id: "132455232@N07", lang: "en-us", format: "json" }) .done(function( data ) { $.each( data.items, function( i, item ) { $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" ); if ( i === 5 ) { return false; } }); }); })(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style> img { height: 159px; float: left; margin: 10px; } </style> <div id="images"></div>

Well I am beginner to jQuery, I have tried looking in jQuery docs about this problem but wasn't successful how to achieve it. I also tried doing it myself but was in vain.

Actually what I am trying to do is wrapping the image inside with the anchor, whose href being the links I am getting from first code.

Code in both the example are same except one line. I know my expected solution will also will be of one line merging both different lines.