onlyforbopi
9/27/2018 - 7:16 AM

JS.JSON.JSON XML HTTP Request Employee Information Project

JS.JSON.JSON XML HTTP Request Employee Information Project

style.css
content_copyfile_download
body {
				font-family: "Trebuchet MS";
			}
			progress {
				width: 30%;
				margin-left: 10px;
			}

			button {
				border: 0px;
				width: 25%;
				background-color: #005A8B;
				color: white;
				font-size: 12pt;
				font-family: "Garamond";
				padding: 10px;
				border-radius: 4px;
				font-weight: bold;
			}

			button:hover {
				background-color: #1551FF;
				font-weight: bolder;
			}

			table {
				width: 90%;
				border: 1px solid #2B85B6;
				border-collapse: collapse;
				margin-left: 50px;
			}

			table th {
				padding: 5px;
				color: white;
				background-color: #2B85B6;
				text-align: left;
				font-size: 14pt;
				border: 2px solid #082F45;;

			}

			table tbody tr, td {
				border: 2px solid #082F45;
				padding: 5px;
			}

			 table tbody tr:nth-child(even) {
				background-color: #73B8DE;
			}

			table caption {
				font-size: 16pt;
				font-weight: bold;
			}

			/* Print rules */
			@media print {
				table {
					width: 80%;
				}
			}
script.js
content_copyfile_download
function getData() {
				var url = "https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json";
				//var url = "js/info.json";
				//var url = "http://localhost/json/info.json";

				var xhr = new XMLHttpRequest();

				xhr.open('GET', url, true);

				var responseToUser = document.querySelector('#downloaded');


					console.log("Response has arrived");

				xhr.onload = function(evt) {
					var jsonResponse = xhr.response;

					var jsObjectFormat = JSON.parse(jsonResponse);

					showResult(jsObjectFormat);

					}

				xhr.onprogress = function(evt) {
					var progressBar = document.getElementById('progressbar');


					progressBar.max = evt.total;
					progressBar.value = evt.loaded;
					
					responseToUser.innerHTML = evt.loaded + " / " + evt.total;

					if(progressBar.value == progressBar.max) {
						responseToUser.innerHTML = "Download finished!";
					}
					
					console.log(evt.loaded + " / " + evt.total);
				}

				xhr.onerror = function(err) {
					console.log("Error " + err);
				}

				xhr.send();
				
				}

		function showResult(jsObjectFormat) {	
					var result = document.getElementById('result');

					var table = document.createElement('table');
					var caption = table.createCaption();
					caption.innerHTML = "Employee Information";

					var tableHead = table.insertRow();
					tableHead.innerHTML = '<th> Employee Name </th> <th> Position </th> <th> Location </th> <th> Age </th> <th> Date of Employment </th> <th> Salary </th>';
					
					//iterate through the employee details

					var employeeDetails = jsObjectFormat['data'];

					employeeDetails.forEach(function(currentEmployee) {

						var tableRow = table.insertRow();
						currentEmployee.forEach(function(data) {
							var cell = tableRow.insertCell();
							cell.innerHTML = data;
						});
					});
				result.append(table);

				var button = document.querySelector('#button');
				button.disabled = "true";
			}
js-json-json-xml-http-request-employee-information-project.markdown
content_copyfile_download
  • Rendered
  • Source

JS.JSON.JSON XML HTTP Request Employee Information Project

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang = "en-US">
	<head>
		<title> Javascript JSON | Employees Information (Optional Project) </title>
		<meta charset = "UTF-8">
    </head>
	<body>
			<h3> Javascript JSON XML HTTP Request </h3>
			<button onclick = "getData()" id = "button"> Download and Display Employee Information </button>
			<p> </p>
			<label for = "progressbar"> Downloading </label> <progress id = "progressbar" value = 0> </progress>

			<p id = "downloaded"> </p>
			<p> </p>
			<br/>
			<output id = "result"> </output>

	</body>
</html>