michaelcpuckett/api-example.html

## api-example.html
<!DOCTYPE html>
<figure>
  <figcaption>U.S. Population over Time</figcaption>
  <table>
    <thead>
      <tr>
        <th scope="col">Year</th>
        <th scope="col">Population</th>
      </tr>
    </thead>
    <tbody id="result"></tbody>
  </table>
</figure>
<script type="module">
  (async function () {
    const API_URL =
      "https://datausa.io/api/data?drilldowns=Nation&measures=Population";
    const responseJson = await fetch(API_URL).then((response) =>
      response.json()
    );
    const populationData = responseJson.data;

    if (!populationData) {
      throw new Error("No population data found.");
    }

    const tbodyElement = window.document.querySelector("#result");

    if (!tbodyElement) {
      throw new Error("No tbody element found.");
    }

    const documentFragment = window.document.createDocumentFragment();

    for (const populationYearItem of populationData) {
      const trElement = window.document.createElement("tr");

      const thElement = window.document.createElement("th");
      thElement.setAttribute("scope", "row");

      const tdElement = window.document.createElement("td");

      const year = populationYearItem["ID Year"];
      const population = populationYearItem["Population"];

      thElement.textContent = year;
      tdElement.textContent = population;

      trElement.append(thElement);
      trElement.append(tdElement);

      documentFragment.append(trElement);
    }

    tbodyElement.append(documentFragment);
  })();
</script>
	<!DOCTYPE html>
	<figure>
	<figcaption>U.S. Population over Time</figcaption>
	<table>
	<thead>
	<tr>
	<th scope="col">Year</th>
	<th scope="col">Population</th>
	</tr>
	</thead>
	<tbody id="result"></tbody>
	</table>
	</figure>
	<script type="module">
	(async function () {
	const API_URL =
	"https://datausa.io/api/data?drilldowns=Nation&measures=Population";
	const responseJson = await fetch(API_URL).then((response) =>
	response.json()
	);
	const populationData = responseJson.data;

	if (!populationData) {
	throw new Error("No population data found.");
	}

	const tbodyElement = window.document.querySelector("#result");

	if (!tbodyElement) {
	throw new Error("No tbody element found.");
	}

	const documentFragment = window.document.createDocumentFragment();

	for (const populationYearItem of populationData) {
	const trElement = window.document.createElement("tr");

	const thElement = window.document.createElement("th");
	thElement.setAttribute("scope", "row");

	const tdElement = window.document.createElement("td");

	const year = populationYearItem["ID Year"];
	const population = populationYearItem["Population"];

	thElement.textContent = year;
	tdElement.textContent = population;

	trElement.append(thElement);
	trElement.append(tdElement);

	documentFragment.append(trElement);
	}

	tbodyElement.append(documentFragment);
	})();
	</script>