Retrieve data from JSON file and display images in a gallery

Question

I\'m new to JQuery and any help would be much appreciated.

\"Using $.getJSON function, retrieve the data in the items.json file provided and display the images in a

Answer 1

If you want to show just img use this(I used div with id="images")

 $(document).ready(function() {

            $.getJSON('items.json', function(data) {
                $.each(data.items, function(i, f) {
                    $("#images").append("<img src=" + f.url + " >");

                });
            });
        }); 

Answer 2

Try this:

$.getJSON('items.json', function(data) {
    $.each(data.items, function(i,f) {
        $("ul").append("<li>URL: "+f.url+"</li><li>Caption: "+f.caption+"</li><br />");

    });
});

Answer 3

Just an update for displaying img;

$.getJSON('js/ads.json', function (data) {
            $.each(data.items, function (i, f) {
                $("ul").append("<li>URL: " + f.url + "</li><li><img src="+f.url+" id=\"image\"/></li><br />");

            });
        });