CODEWITHSUNDEEP
jquerygetjson
Megatron
Megatron

Reputation: 85

Retrieve data from JSON file and display images in a gallery

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:

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

        });
    });
});

Upvotes: 2

Views: 15218

Answers (3)

BogunZr
BogunZr

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

                });
            });
        });

Upvotes: 0

tuvboy
tuvboy

Reputation: 81

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

            });
        });

Upvotes: 0

Sambath Kumar S
Sambath Kumar S

Reputation: 407

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

    });
});

Upvotes: 4

Related Questions