In this article I will explain with an example, how to display JSON response in HTML using AJAX and jQuery.
The JSON response will be received from external API called using AJAX and jQuery.
 
 
ASPSnippets Test API
The following API will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json
The API returns the following JSON.
[
   {
      "CustomerId":1,
      "Name":"John Hammond",
      "Country":"United States"
   },
   {
      "CustomerId":2,
      "Name":"Mudassar Khan",
      "Country":"India"
   },
   {
      "CustomerId":3,
      "Name":"Suzanne Mathews",
      "Country":"France"
   },
   {
      "CustomerId":4,
      "Name":"Robert Schidner",
      "Country":"Russia"
   }
]
 
 
HTML Markup
The following HTML Markup consists of an HTML DIV element.
<h4>Customers</h4>
<hr/>
<div id="dvCustomersGrid"></div>
 
 
Displaying JSON response in HTML using jQuery and AJAX
Inside the jQuery document ready event handler, the API URL is called using the jQuery get function.
Inside the jQuery get success event, the received response is converted to JavaScript Array using the JSON.parse JavaScript function and set in the customers variable.
Adding the Header Row
The Header Row will be built using Table TH element and appended using jQuery.
 
Adding the Data Rows
A loop is executed over the Array elements and one by one a Row is created in the HTML Table.
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.
 
Then inside each Row, a dynamic Cell element is created and appended using jQuery.
 
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 append 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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.get("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json", function (data, status) {
            var customers = JSON.parse(data);
 
            //Create a HTML Table element.
            var table = $("<table />");
            table[0].border = "1";
 
            //Add the header row.
            var row = $(table[0].insertRow(-1));
 
            //Add the header cells.
            var headerCell = $("<th />");
            headerCell.html("CustomerId");
            row.append(headerCell);
 
            var headerCell = $("<th />");
            headerCell.html("Name");
            row.append(headerCell);
 
            var headerCell = $("<th />");
            headerCell.html("Country");
            row.append(headerCell);
 
            //Add the data rows.
            for (var i = 0; i < customers.length; i++) {
                //Add the data row.
                var row = $(table[0].insertRow(-1));
 
                //Add the data cells.
                var cell = $("<td />");
                cell.html(customers[i].CustomerId);
                row.append(cell);
 
                cell = $("<td />");
                cell.html(customers[i].Name);
                row.append(cell);
 
                cell = $("<td />");
                cell.html(customers[i].Country);
                row.append(cell);
            }
 
            var dvTable = $("#dvCustomersGrid");
            dvTable.html("");
            dvTable.append(table);
        });
    });
</script>
 
 
Screenshot
jQuery: Display JSON response in HTML using AJAX
 
 
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