getJSON - how to retrieve data and images in .json file and display images in html

getJSON - how to retrieve data and images in .json file and display images in html

Hello All, I'm new to JQuery and I'm having a tough time with a problem I'm trying to solve. 

Using $.getJSON function, I need to retrieve the data in the .json file and display the images in a gallery. The gallery should display each image at roughly thumbnail size with its caption below it in a 3-column grid at desktop resolution.

I can get the .json data to output on the HTML page, but I'm stuck after that. Any help or suggestions are much appreciated. Thanks!

output so far:

  • 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

index.html
  1. <div>
  2.       <ul></ul>
  3. </div>

item.json
  1. {
  2. "items": [
  3. {
  4. "url": "images/image_1.jpg",
  5. "caption": "Image 1 Caption"
  6. },
  7. {
  8. "url": "images/image_2.jpg.jpg",
  9. "caption": "Image 2 Caption"
  10. },
  11. {
  12. "url": "images/image_3.jpg.jpg",
  13. "caption": "Image 3 Caption"
  14. },
  15. {
  16. "url": "images/image_4.jpg.jpg",
  17. "caption": "Image 4 Caption"
  18. }
  19. ]
  20. }

script.js
  1. $(document).ready( function(){
  2. $.getJSON('item.json', function(data) {
  3.    $.each(data.items, function(i,f) {
  4.        $("ul").append("<img src="+f.url+" id="image"/><li>Caption: "+f.caption+"</li><br />");
  5.    });
  6. });
  7. });