Objective: To have a table constructed out of a json response.

Step 1: Preparing the html.

<!doctype html>
<html>
	<head>
		<title>
			Demo of creating table out of ajax json response
		</title>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		
	</head>
	<body>
		<div id="tableContainer" style="height:300px">
			The table will be displayed here
		</div>
		
		<form>
				CLick me<input type="button" value="Click me" id="tableFetcher"/>
		</form>
		
	</body>
</html>

Nothing fancy here, line 7 is where I am linking to the mootools library,  in line 11, I am creating a div block with id "tablecontainer" and in this container the table is going to be shown , once the button is clicked mentioned in line 16.

Step 2 : Attaching a click event.
Now we need to attach a click event to the id "tableFetcher". code looks like

window.addEvent('domready', function() {
			$('tableFetcher').addEvent('click', function(event){
		
			})
});
			

As you can see , we make sure the dom is ready in line 1 above, and attach a click event to the 'tableFetcher' button. The inline function is now where the request will be sent and the response will be manipulated.

Step 3: Sending a request and manipulating the response

new Request.JSON({
		url: 'tabledata.json', 
		onSuccess: function(response){
				var tableStr="<table>";
				var tableHeader="";
				for(i=0;i<response.tableData.header.length;i++){
				tableHeader+=("<th>"+response.tableData.header[i]+"</th>");
				}
				tableHeader="<thead><tr>"+tableHeader+"</tr></thead>";
				var tableBody="";
				for(i=0;i<response.tableData.rows.length;i++){
				    var tableRow="";
				    for(j=0;j<response.tableData.rows[i].length;j++){
				        tableRow+="<td>"+response.tableData.rows[i][j]+"</td>";
					}
				    tableBody=tableBody+"<tr>"+tableRow+"</tr>";
				 }		
				tableBody="<tbody>"+tableBody+"</tbody>";
				$('tableContainer').set('html',"<table border='1'>"+tableHeader+tableBody+"</table>");
							
			}
		}).send();

It is not complicated, just looks, lets break it down.  The line one is where we are staring to create the Request.JSON object, which has two parts.Part one is the url where the request is going to , here the url is the response containing the json data and is a file kept in the server. And the part two is the onSuccess handler function, what it does ? Simple it creates the table HTML strings. At line 6 we are creating the table headers by iterating the response.tableData.header, and the line 11 and 13 makes the rows and the cells respectively. With line 18 we are completing the entire table , which we are putting it in the tableContainer by using set('html' method. the set('html' is more like innerHTML in regular javascript.
 

Now putting all in one place our html file looks like below.

<!doctype html>
<html>
	<head>
		<title>
			Demo of creating table out of ajax json response
		</title>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script type="text/javascript">
			
			window.addEvent('domready', function() {
			$('tableFetcher').addEvent('click', function(event){
			new Request.JSON({
								url: 'tabledata.json', 
								onSuccess: function(response){
									var tableStr="<table>";
									var tableHeader="";
									for(i=0;i<response.tableData.header.length;i++){
									 tableHeader+=("<th>"+response.tableData.header[i]+"</th>");
									}
									tableHeader="<thead><tr>"+tableHeader+"</tr></thead>";
									var tableBody="";
									for(i=0;i<response.tableData.rows.length;i++){
										var tableRow="";
											for(j=0;j<response.tableData.rows[i].length;j++){
											  tableRow+="<td>"+response.tableData.rows[i][j]+"</td>";
											}
											tableBody=tableBody+"<tr>"+tableRow+"</tr>";
									}		
									tableBody="<tbody>"+tableBody+"</tbody>";
									$('tableContainer').set('html',"<table border='1'>"+tableHeader+tableBody+"</table>");
									
									
								}
							}).send();
				
			})
});
			
		</script>
	</head>
	<body>
		<div id="tableContainer" style="height:300px">
			The table will be displayed here
		</div>
		
		<form>
				CLick me<input type="button" value="Click me" id="tableFetcher"/>
		</form>
		
	</body>
</html>

Step 4: Understanding the json format.

The tabledata.json is where the json data is kep and it looks like

{"tableData":{"header":["Name","Age","Salary"],"rows":[["Abhiram",23,234],["Manasi",21,222],["Sparsh",20,200]]}}

The tableData is the main object with header and rows , header has a list of strings which is going to be our table headers, and the rows has a array of ( 3 rows) of data each represents rows and each value represents value in a cell of the table.


Step 5: Running the application:

Running is simple , all you need to do is put the tablejson.html and tableData.json file in a server like apache ( don't forget the mootools lib) and locate the html file from your browser.

 

Download the entire code from here