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 gallery below. The gallery should display each image at roughly thumbnail size with its caption below it in a 3-column grid at desktop resolution."

I was able to get the the .json to output on the HTML page, now I was wondering how to get the actual images to show on the HTML page instead of the URL path of the images? This is what outputs to the HTML page currently:

• URL: images/image_1.jpg

• caption: Image 1 Caption

• URL: images/image_2.jpg

• caption: Image 2 Caption

• URL: images/image_3.jpg

• caption: Image 3 Caption

• URL: images/image_4.jpg

• caption: Image 4 Caption

items.json

{
"items": [
    {
        "url": "images/image_1.jpg",
        "caption": "Image 1 Caption"
    },
    {
        "url": "images/image_2.jpg.jpg",
        "caption": "Image 2 Caption"
    },
    {
        "url": "images/image_3.jpg.jpg",
        "caption": "Image 3 Caption"
    },
    {
        "url": "images/image_4.jpg.jpg",
        "caption": "Image 4 Caption"
    }
]

}

scripts.js

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

        });
    });
});

Answer 1

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 2

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 />");

            });
        });

Answer 3

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 + " >");

                });
            });
        });