get the .json to output on the HTML page using Javascript

Question

Retrieve data from JSON file and display images in a gallery

I was able to get the the .json to output on the HTML page

@Jesuraja - How did you manage to do this. I am actully on the same state. I have JSON file having image local drive location similar to yours I would like to know how you did the above step. I just want an approach how should I proceed

Why would one edit this question instead of closing it? – tevemadar Aug 06 '20 at 18:39 — tevemadar, Aug 06 '20 at 18:39

score 0 · Answer 1 · answered Dec 09 '16 at 18:31

Try this :

var jsonObj = {
"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"
    }
  ]
};

function createGallery(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < array.length; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode("Image : "+array[i].url+"  Caption: "+array[i].caption));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById('gallery').appendChild(createGallery(jsonObj.items));

<div id="gallery"></div>

get the .json to output on the HTML page using Javascript

1 Answers1