Fetch JSON

This is JavaScript program demonstrates how to fetch a file with JSON data.

FetchJson.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>XoaX.net's Javascript</title>
		<!-- Supply a transparent 1x1 favicon -->
		<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
		<script type="text/javascript" src="FetchJson.js"></script>
		<style type="text/css">
			th {
				background-color: lightgray;
			}
			td {
				background-color: white;
			}
		</style>
	</head>
	<body onload="Initialize()">
		<table id="idChurchFathers" border="3" cellspacing="0" cellpadding="5"></table>
  </body>
</html>

FetchJson.js

async function Initialize() {
	// NOTE: THIS REQUIRES A WEB SERVER TO RUN
	let sFileName = "ChurchFathers.json";
	
	const kqTable = document.getElementById("idChurchFathers");
	
	fetch(sFileName).then((qResponse) =>{
		if (!qResponse.ok) {
			throw new Error(`HTTP error, status = ${qResponse.status}`);
		}
		return qResponse.json();
	}).then((sJson) =>{
		// Add the row of headers
		const kqHeaderRow = document.createElement("tr");
		kqTable.appendChild(kqHeaderRow);
		const kqNameHeader = document.createElement("th");
		kqNameHeader.textContent = "Name";
		kqHeaderRow.appendChild(kqNameHeader);
		const kqYearOfDeathHeader = document.createElement("th");
		kqYearOfDeathHeader.textContent = "Year of Death";
		kqHeaderRow.appendChild(kqYearOfDeathHeader);
		const kqDescriptionHeader = document.createElement("th");
		kqDescriptionHeader.textContent = "Description";
		kqHeaderRow.appendChild(kqDescriptionHeader);
		// Add the rows of data that were read from the JSON file
		for (const kqChurchFather of sJson["Church Fathers"]) {
			const kqTableRow = document.createElement("tr");
			const kqNameElement = document.createElement("td");
			kqNameElement.textContent = kqChurchFather.Name;
			kqTableRow.appendChild(kqNameElement);
			const kqYearOfDeathElement = document.createElement("td");
			kqYearOfDeathElement.textContent = kqChurchFather["Year of Death"];
			kqTableRow.appendChild(kqYearOfDeathElement);
			const kqDescriptionElement = document.createElement("td");
			kqDescriptionElement.textContent = kqChurchFather["Description"];
			kqTableRow.appendChild(kqDescriptionElement);
			kqTable.appendChild(kqTableRow);
		}
	}).catch((qError) => {
		const qErrorElement = document.createElement("p");
		qErrorElement.appendChild(document.createTextNode(`Error: ${qError.message}`));
		document.body.insertBefore(qErrorElement, kqTable);
	});
}

Core JavaScript

Fetch JSON

FetchJson.html

FetchJson.js

Output