Show Images from URLs in a JSON file using JavaScript

You can use the XMLHttpRequest object in JavaScript to read and extract data from an external JSON file. I have explained this in detail in one of my previous posts. Now here in this post I am sharing an example that explains how to show images using image URLs extracted from a JSON file in JavaScript.

The JSON Data

Here' the sample JSON data. The file has few JSON objects in it. The image object has url for the images.

You can copy the JSON and save it in a file in your computer with .json extention.

The markup and the script

<html>
<body>
  <p>
    <input type="button" onclick="showDataWithImages()" value="Show Images" />
  </p>
  
  <div id='container'></div>
</body>  
<script>
  let showDataWithImages = () => {
    const oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

    function reportStatus() {
      if (oXHR.readyState == 4)          // Request successful.
        showTheList(this.responseText);  // Now show the data.
    }

    oXHR.onreadystatechange = reportStatus;
    oXHR.open("GET", "../../library/data-with-image.json", true);   // true = asynchronous request, false = synchronous request.
    oXHR.send();

    function showTheList(json) {
      let arrItems = [];
      arrItems = JSON.parse(json); 	// Populate array with JSON data.

      // The parent <div>.
      let div = document.getElementById('container');     
      div.innerHTML = '';

      // Loop through data in the JSON array.
      for (let i = 0; i <= arrItems.length - 1; i++) {

        // Create two <div> elements, one for the name and the other to show the image.
        let divLeft = document.createElement('div');
        divLeft.innerHTML = arrItems[i].Name;

        // Create an <img> element.
        let img = document.createElement('img');    
        img.src = arrItems[i].Image; // The image source from json.

        let divRight = document.createElement('div');
        divRight.setAttribute('style', 'border-left: solid 1px #ddd;');
        divRight.appendChild(img);

        // Add the child DIVs to parent DIV.
        div.appendChild(divLeft);
        div.appendChild(divRight);

        // Note: Instead of <div>, you can also create a dynamic <table> to show the images. 
        // Here's an example ... https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm 
      }
    }
  }
</script>
</html>

Try it

Note: You can use a <table> instead of <div> to show the data.

I have explained in detail about the XMLHttpRequest object here. Please read the article to understand how the object works and how using its various property you can connect and extract data from different types of files in a remote location.

Remember: All modern browsers support the XMLHttpRequest object. Therefore, you can use this object and properties without any hesitation.

Now back to the code. Once the JSON file is received, the data is stored in an Array. This will make the data extraction process simple.

arrItems = JSON.parse(json);

Finally, I am running a loop to extract all the data from the array. To show the images on the web page, I am creating an <img> object and assigning the image url as the source to the <img> object.

var img = document.createElement('img');    // Create an <img> element.
img.src = arrItems[i].Image;                // The image source from JSON array.

The object name .Image, is case sensitive. This object is defined in the JSON file. You must use it as it is in your script.

When everything is done, I am appending the data along with the dynamically created elements, to the parent element (a <div>).

← PreviousNext →