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

        });
    });
});

Solution

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

    });
});

Comments

[Megatron]

Thanks a lot, I got all of the .json file to show on the HTML page. Now, how would you suggest that I display the actual images on the page instead of the names of the URL?

[Megatron]

Yes, all in the same project folder. index.html and .json file are in the root directory and the images are in images folder. images/image_1.jpg, images/image_2.jpg, etc...