In this article I will explain with an example, how to display Images from JSON Array using JavaScript.
This article will illustrate how to display Images in a dynamic HTML Table generated by looping through the JSON Array using JavaScript.
The Images will be stored in a Folder (Directory) on the Server and will be displayed in an HTML Image element using JavaScript.
 
 
HTML Markup
The following HTML Markup consists of an HTML Button and an HTML DIV element. The HTML Button has been assigned an OnClick event handler which calls the GenerateTable JavaScript function.
<input type="button" value="Generate Table" onclick="GenerateTable()" />
<hr />
<div id="dvTable"></div>
 
 
JavaScript function to display Images from JSON Array
Inside the GenerateTable JavaScript function, first a JSON Array is created. The JSON Array contains the Table Header and Cell values.
The third field in the Array item holds the Path of the Image file stored in a Folder (Directory) on the Server.
 
HTML Table
First a dynamic HTML Table is created using JavaScript createElement method.
 
Adding the Header Row
The Header Row will be built using the first element of the Array as it contains the Header column text values.
First a row is inserted into the Table and then using the count of columns a loop is executed and one by one Table TH element is created using the createElement method.
Table insertRow Method: This method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.
 
Adding the Data Rows
A loop is executed over the array elements and one by one a Row is created in the HTML Table. Then inside each Row a Cell is added using the Table insertCell method.
The first two cell values are String values and hence are assigned directly to the Table Cell while for the Image cell, a dynamic HTML Image element is created and the Path (URL) of the Image file is assigned to the SRC attribute.
Finally, the Image element is appended as child in the Table Cell using the appendChild method.
Table Row insertCell Method: This method adds a new cell to a Table Row at the specified index. If the index is supplied as -1 then the cell will be added at the last position.
 
Adding the dynamic Table to the Page
Finally the dynamically created table is added to the page by appending it to the HTML DIV using the appendChild method.
Note: You can also append an element to the body but then you won’t be able to set its placement on the page. Using a container such a DIV helps us add the dynamic element to the desired place.
 
<script type="text/javascript">
    function GenerateTable() {
        //Build an array containing Customer records.
        var customers = new Array();
        customers.push(["Customer Id", "Name", "Photo"]);
        customers.push([1, "John Hammond", "Images/1.jpg"]);
        customers.push([2, "Mudassar Khan", "Images/2.jpg"]);
        customers.push([3, "Suzanne Mathews", "Images/3.jpg"]);
        customers.push([4, "Robert Schidner", "Images/4.jpg"]);
 
        //Create a HTML Table element.
        var table = document.createElement("TABLE");
        table.border = "1";
 
        //Get the count of columns.
        var columnCount = customers[0].length;
 
        //Add the header row.
        var row = table.insertRow(-1);
        for (var i = 0; i < columnCount; i++) {
            var headerCell = document.createElement("TH");
            headerCell.innerHTML = customers[0][i];
            row.appendChild(headerCell);
        }
 
        //Add the data rows.
        for (var i = 1; i < customers.length; i++) {
            row = table.insertRow(-1);
            for (var j = 0; j < columnCount; j++) {
                var cell = row.insertCell(-1);
                if (j < 2) {
                    cell.innerHTML = customers[i][j];
                } else {
                    var img = document.createElement("IMG");
                    img.src = customers[i][j];
                    cell.appendChild(img);
                }
            }
        }
 
        var dvTable = document.getElementById("dvTable");
        dvTable.innerHTML = "";
        dvTable.appendChild(table);
    }
</script>
 
 
Screenshot
Display Images from JSON Array using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code