surajitbasak109 · April 30, 2017 13:56
diff --git a/Display data from json file with javascript ajax technique.html b/Display data from json file with javascript ajax technique.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>ajax example</title>
 		<style>
 		body {
 			font-family: Helvetica, Arial, sans-serif;
 			background: #f2f2f2;
 			padding: 0;
 			margin: 0;
 			font-size: 16px;
 			color: #333;
 		}

 		.tableTop {
 			background: #333;
 			color: #fff;
 			padding: 8px 0;
 			text-align: center;
 			font-weight: bold;
 			font-size: 24px;
 			font-family: monospace;
 		}

 		div#tableWrapper {
 			width: 500px;
 			margin: 100px auto;
 		}

 		table {
 			background: #fff;
 			border: 1px solid #ccc;
 			width: 100%;
 			border-collapse: collapse;
 			text-align: left;
 		}

 		table th {
 			background: #e9e9e9;
 			font-weight: 500;
 			border: 1px solid #ccc;
 			padding: 4px;
 		}

 		table td {
 			border: 1px solid #ccc;
 		}
 		</style>
 	</head>
 	<script>
 		
 		getReq('data.json', function (resp) {
 			// console.log(resp);
 			var data = JSON.parse(resp);
 			// console.log(data);
 			
 			var html = "<div class='tableTop'>Sample Data</div><table>";

 			html += "<tr><th>Order Date</th>" +
 			"<th>Region</th>" +
 			"<th>Representative</th>" + 
 			"<th>Item</th>"+
 			"<th>Units</th>"+
 			"<th>Unit Cost</th>"+
 			"<th>Total</th></tr>";
 			for (var i = 0; i < data.length; i++)
 			{
 				// log(data[i].rep);
 				
 				html += '<tr>';
 				html += '<td>'+data[i].orderDate+'</td>';
 				html += '<td>'+data[i].region+'</td>';
 				html += '<td>'+data[i].rep+'</td>';
 				html += '<td>'+data[i].item+'</td>';
 				html += '<td>'+data[i].units+'</td>';
 				html += '<td>'+data[i].unitCost+'</td>';
 				html += '<td>' + (data[i].units * data[i].unitCost).toFixed(2)+ '</td>';
 				html += '</tr>';
 			}
 			
 			html += "</table>";
 			
 			document.getElementById("tableWrapper").innerHTML = html;
 		})
 	
 		function getReq(url, fn)
 		{
 			var invocation = new XMLHttpRequest();
 			invocation.onreadystatechange = handleResponse;
 			
 			invocation.open("GET", url, true);
 			invocation.send(null);
 			
 			function handleResponse()
 			{
 				if (invocation.readyState == invocation.DONE)
 				{
 					if (invocation.status == 200)
 					{
 						fn(invocation.responseText);
 					}
 				}
 			}
 		}
 		
 		function log(msg)
 		{
 			return console.log(msg);
 		}
 	</script>
 	
 	<body>
 		<div id="tableWrapper"></div>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>ajax example</title>
	<style>
	body {
	font-family: Helvetica, Arial, sans-serif;
	background: #f2f2f2;
	padding: 0;
	margin: 0;
	font-size: 16px;
	color: #333;
	}

	.tableTop {
	background: #333;
	color: #fff;
	padding: 8px 0;
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	font-family: monospace;
	}

	div#tableWrapper {
	width: 500px;
	margin: 100px auto;
	}

	table {
	background: #fff;
	border: 1px solid #ccc;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	}

	table th {
	background: #e9e9e9;
	font-weight: 500;
	border: 1px solid #ccc;
	padding: 4px;
	}

	table td {
	border: 1px solid #ccc;
	}
	</style>
	</head>
	<script>

	getReq('data.json', function (resp) {
	// console.log(resp);
	var data = JSON.parse(resp);
	// console.log(data);

	var html = "<div class='tableTop'>Sample Data</div><table>";

	html += "<tr><th>Order Date</th>" +
	"<th>Region</th>" +
	"<th>Representative</th>" +
	"<th>Item</th>"+
	"<th>Units</th>"+
	"<th>Unit Cost</th>"+
	"<th>Total</th></tr>";
	for (var i = 0; i < data.length; i++)
	{
	// log(data[i].rep);

	html += '<tr>';
	html += '<td>'+data[i].orderDate+'</td>';
	html += '<td>'+data[i].region+'</td>';
	html += '<td>'+data[i].rep+'</td>';
	html += '<td>'+data[i].item+'</td>';
	html += '<td>'+data[i].units+'</td>';
	html += '<td>'+data[i].unitCost+'</td>';
	html += '<td>' + (data[i].units * data[i].unitCost).toFixed(2)+ '</td>';
	html += '</tr>';
	}

	html += "</table>";

	document.getElementById("tableWrapper").innerHTML = html;
	})

	function getReq(url, fn)
	{
	var invocation = new XMLHttpRequest();
	invocation.onreadystatechange = handleResponse;

	invocation.open("GET", url, true);
	invocation.send(null);

	function handleResponse()
	{
	if (invocation.readyState == invocation.DONE)
	{
	if (invocation.status == 200)
	{
	fn(invocation.responseText);
	}
	}
	}
	}

	function log(msg)
	{
	return console.log(msg);
	}
	</script>

	<body>
	<div id="tableWrapper"></div>
	</body>
	</html>