Skip to content

Instantly share code, notes, and snippets.

@badosa
Last active October 2, 2022 16:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badosa/c1feb27bd8214de60f430379424e12fa to your computer and use it in GitHub Desktop.
Save badosa/c1feb27bd8214de60f430379424e12fa to your computer and use it in GitHub Desktop.
JJT v1: ECMAScript module
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JJT v1: ECMAScript module</title>
<style>
body {
padding: 20px 40px;
font-size: 30px;
}
</style>
</head>
<body>
<main>
<p>What: <strong>Unemployment rate (%)</strong></p>
<p>Where: <strong class="geo">...</strong></p>
<p>When: <strong class="time">...</strong></p>
<p>How much: <strong class="value">...</strong></p>
</main>
<script nomodule>
//For old browsers not supporting ES modules
window.alert("Sorry, your browser does not support ECMAScript modules!");
</script>
<script type="module">
import JSONstat from "https://unpkg.com/jsonstat-toolkit@latest/import.mjs";
//or https://cdn.jsdelivr.net/npm/jsonstat-toolkit@latest/import.mjs
const
url="https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/une_rt_a?sex=T&lastTimePeriod=1&geo=EU27_2020&unit=PC_ACT&age=Y15-74",
main=async function(url){
const
res=await fetch(url),
json=await res.json(),
stat=JSONstat(json)
;
document.querySelector(".geo").innerText=stat.Dimension("geo").Category(0).label;
document.querySelector(".time").innerText=stat.Dimension("time").Category(0).label;
document.querySelector(".value").innerText=stat.value[0];
}
;
main(url);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment