How to show JSON data in HTML using jQuery and ajax?

I have seen a lot of questions being asked about how to fetch JSON data in HTML. In this article, we will see how to show JSON as an HTML table using jQuery and Ajax.

For the purpose of this tutorial, let us assume that we have a simple response.json file containing JSON data that can be obtained using Ajax request.

JSON file:

Sometimes we need to parse JSON responses generated either from a database or from some API requests. Fo this article I have created a JSON file i.e. response.json and put some JSON data into it.

[
  {
    "id": 1,
    "first_name": "Caralie",
    "last_name": "Poynton",
    "email": "cpoynton0@washington.edu",
    "gender": "Male"
  }, 
  {
    "id": 2,
    "first_name": "Anstice",
    "last_name": "Gruszczak",
    "email": "agruszczak1@rakuten.co.jp",
    "gender": "Genderqueer"
  }, 
  {
    "id": 3,
    "first_name": "Enrichetta",
    "last_name": "Earp",
    "email": "eearp2@example.com",
    "gender": "Male"
  }, 
  {
    "id": 4,
    "first_name": "Faye",
    "last_name": "Dyment",
    "email": "fdyment3@flavors.me",
    "gender": "Non-binary"
  }, 
  {
    "id": 5,
    "first_name": "Zahara",
    "last_name": "Battill",
    "email": "zbattill4@cnn.com",
    "gender": "Polygender"
  }, 
  {
    "id": 6,
    "first_name": "Eulalie",
    "last_name": "Jeyes",
    "email": "ejeyes5@cbsnews.com",
    "gender": "Female"
  }, 
  {
    "id": 7,
    "first_name": "Carmelia",
    "last_name": "Pattinson",
    "email": "cpattinson6@ucsd.edu",
    "gender": "Bigender"
  }, 
  {
    "id": 8,
    "first_name": "Aleta",
    "last_name": "De Freyne",
    "email": "adefreyne7@vinaora.com",
    "gender": "Agender"
  }, 
  {
    "id": 9,
    "first_name": "Stormie",
    "last_name": "Habbert",
    "email": "shabbert8@loc.gov",
    "gender": "Agender"
  }, 
  {
    "id": 10,
    "first_name": "Frederique",
    "last_name": "Gogerty",
    "email": "fgogerty9@amazon.co.jp",
    "gender": "Bigender"
  }
]

HTML structure:

Let’s design some basic HTML structures using <table> tag to show the JSON data.

<table class="response-table">
	<thead>
		<tr>
			<th>#</th>
			<th>ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody id="result">
		
	</tbody>
</table>

In the above code, you can see I have added an id to <tbody> tag. After fetching JSON data by using AJAX, we will populate the table based on that responses.

Add Some CSS style:

Now add some CSS to our table to make it looks more cleaner.

<style>
	.response-table,
	.response-table td,
	.response-table th
	{
		border: 1px solid #ddd;
		border-collapse: collapse;
		padding: 11px 15px;
	}

	.response-table thead tr{
		background-color: #04AA6D;
		color: #fff;
	}

	.response-table tbody tr:nth-child(odd) {
	    background-color: #f2f2f2;
	}
</style>

Get JSON data to Generate HTML Table

Now we need to make an ajax request to get the JSON data.

<script type="text/javascript">
	$(document).ready(function() {

		$.getJSON( 'response.json', function(json){
			container = $("#container"); 
    		container.html("");

    		var i = 1;

    		$.each(json, function(key, value) {
    			
    			container.append( $("<tr><td>" + i + "</td><td>" + value.id + "</td><td>" + value.first_name + "</td><td>" + value.last_name + "</td><td>" + value.email + "</td><td>" + value.gender + "</td></tr>") );

    			i++;
    		});
		});

	}); //end of document ready
</script>	

The following points are worth noting about the code given above:

• We have wrapped our complete code inside $(document).ready(); so that it executes only when DOM is ready.
• $.getJSON() is a very useful function from the jQuery library that loads a JSON file. Here we have passed our JSON file i.e. response.json.
• After getting data, we loop through the data using jQuery $.each() function.
• By append() method, I am adding row to our HTML table.

Preview:

Conclusion:

I hope this would be useful to beginners who want some ready-made solution regarding how to show JSON data in HTML. I will be here with another interesting and useful tutorial soon. Please do not forget to post your valuable comments and suggestions, it really motivates me for writing more quality articles. Thanks a lot…