javascript/json.html

<!DOCTYPE html>
<html>
<head>
	<title>JSON Demonstration</title>
	<style type="text/css">
		#square {
			margin-top: 20px;
			margin-left: 100px;
			height: 200px;
			width: 200px;
			background: orange;
		}

		div {
			margin-bottom: 20px;
		}

		.round {
			border-radius: 20px;
		}

		#square:hover{
			cursor: pointer;
		}

		#container {
			width: 60%;
			margin: auto;
		}

	</style>
	<script>
	var template;
	function init() {
			// we only need to create a single copy of the template
			template = document.getElementById("content_template");

			document.getElementById('square').addEventListener('click', trigger);
	}

	function trigger()
	{
		showOrganizations("json/data.json", handleOrgResponse);
	}

	function showOrganizations(url, func){
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				func(this);
			}
		};
		xhttp.open("GET", url, true);
		xhttp.send();
	}

	function handleOrgResponse(xhttps){
		document.getElementById("json_response").getElementsByTagName('pre')[0].innerHTML = xhttps.responseText;
		var data = JSON.parse(xhttps.responseText);
		if (data.length > 0) {
			for (let i = 0; i < data.length; i++)
			{
				createFromTemplate(data[i], i);
			}
		}
		else
		{
			alert("NO DATA");
		}
	}

	function createFromTemplate(org_obj, index) {
		// copy the template, deep allows it to copy all child elements
		let divCopy = template.cloneNode(deep = true);

		// change the id & class name
		divCopy.className = 'organization';
		divCopy.id = 'org'+index;
		// make it visible
		divCopy.style.visibility = "visible";


		// change the properties values the new entry
		divCopy.getElementsByClassName('org_name')[0].innerHTML = org_obj["Organization Name"];
		divCopy.getElementsByClassName('org_desc')[0].innerHTML = org_obj.Description;
		divCopy.getElementsByClassName('org_type')[0].innerHTML = org_obj["Organization Type"];
		divCopy.getElementsByClassName('founding_year')[0].innerHTML = org_obj["Founding Year"];
		divCopy.getElementsByClassName('city')[0].innerHTML = org_obj["City"];

	  // add the new entry to the page inside the container div
		document.getElementById('container').appendChild(divCopy);
	}

	</script>
</head>

<body onload='init()'>

	<!-- <div id="square" onclick="showSentence()"></div> -->
	<div id="square"></div>

	<div id="content_template" style="visibility: hidden;">
		<h2 class="org_name">Organization Name</h2>
		<p class="org_desc">Description</p>
		<ul>
			<li class="org_type">Organizatin Type</li>
			<li class="founding_year">Founding Year</li>
			<li class="city">City</li>
		</ul>

	</div>

	<div id="container">

	</div>

	<div id="json_response">
		<pre>
				null
		</pre>
	</div>
</body>
</html>