Retrieve data from JSON file and display images in a gallery

2
votes

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

        });
    });
});
3
jquerygetjson
Any error in console? – Okky
don't edit the question. clearly say whats your problem.. – Sambath Kumar S
No error in console, I get an output. I would like the images to display as the output instead of the actual URL. Thanks. – Megatron
Just use it Image tag instead if <li> tag - <img src="+f.url+" id="image"/> – Sambath Kumar S
Nothing shows, I get an error: Unexpected identifier. This is what I used: $("ul").append("<img src="+f.url+" id="image"/><li>Caption: "+f.caption+"</li><br />"); – Megatron

3 Answers

4
votes

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

    });
});
0
votes

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

            });
        });
0
votes

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

                });
            });
        });