This is an example of simultaneously fetching data from several JSON-stat compatible APIs using Promise.all() and comparing the results. In this example, the chart is built once all the data have been fetched.
For an example using async/await and displaying each datum as soon as it is available, see Unemployment rate according to several sources.
| <!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]><html class="lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html> <!--<![endif]--> | |
| <head> | |
| <title>Inflation in different countries</title> | |
| <!-- DO NOT DO THIS IN PRODUCTION --> | |
| <!-- JS.ORG IS NOT A CDN! Link to your own copies or to a CDN. --> | |
| <link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://visual.js.org/lazyvisualsetup.js"></script> | |
| <!-- /DO NOT DO THIS IN PRODUCTION --> | |
| <script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script> | |
| <style> | |
| h1, #countries { | |
| text-align: center; | |
| } | |
| .country { | |
| display: inline-block; | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| margin: 10px 0 10px 10px; | |
| font-weight: bold; | |
| } | |
| .country.done { | |
| color: #060; | |
| border-color: #060; | |
| background-color: #e5ffe5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section id="visual" class="visual"><h1>Retrieving data from</h1><div id="countries"></div></section> | |
| <script> | |
| const sources=[ | |
| { | |
| id: "ie", | |
| label: "Ireland", | |
| filter: { "Commodity Group": "-", "Statistic": "CPM01C07" }, | |
| method: "get", | |
| url: "https://statbank.cso.ie/StatbankServices/StatbankServices.svc/jsonservice/responseinstance/CPM01", | |
| }, | |
| { | |
| id: "dk", | |
| label: "Denmark", | |
| method: "get", | |
| url: "https://api.statbank.dk/v1/data/PRIS111/JSONSTAT?lang=en&VAREGR=000000&ENHED=300&Tid=(-n%2B60)", | |
| },{ | |
| id: "se", | |
| label: "Sweden", | |
| method: "post", | |
| url: "http://api.scb.se/OV0104/v1/doris/en/ssd/START/PR/PR0101/PR0101A/KPI12MNy", | |
| data: { | |
| "query": [ | |
| { | |
| "code": "Tid", | |
| "selection": { | |
| "filter": "top", | |
| "values": ["60"] | |
| } | |
| } | |
| ], | |
| "response": { | |
| "format": "json-stat" | |
| } | |
| } | |
| }, | |
| { | |
| id: "no", | |
| label: "Norway", | |
| method: "post", | |
| url: "https://data.ssb.no/api/v0/en/table/03013", | |
| data: { | |
| "query": [ | |
| { | |
| "code": "Konsumgrp", | |
| "selection": { | |
| "filter": "item", | |
| "values": [ | |
| "TOTAL" | |
| ] | |
| } | |
| }, | |
| { | |
| "code": "ContentsCode", | |
| "selection": { | |
| "filter": "item", | |
| "values": [ | |
| "Tolvmanedersendring" | |
| ] | |
| } | |
| }, | |
| { | |
| "code": "Tid", | |
| "selection": { | |
| "filter": "top", | |
| "values": ["60"] | |
| } | |
| } | |
| ], | |
| "response": { | |
| "format": "json-stat2" | |
| } | |
| } | |
| } | |
| ]; | |
| let html=""; | |
| sources.forEach(e=>{ | |
| html+=`<div class="country" id="${e.id}">${e.label}</div>`; | |
| }); | |
| document.querySelector("#countries").innerHTML=html; | |
| Promise.all( | |
| sources.map(e=>{ | |
| let options={ method: e.method }; | |
| if(e.method==="post"){ | |
| options.body=JSON.stringify(e.data); | |
| } | |
| return fetch(e.url, options).then(res => { | |
| const | |
| id=sources.find(e=>e.url===res.url).id, | |
| el=document.querySelector("#"+id) | |
| ; | |
| el.classList.add("done"); | |
| return res.json(); | |
| }); | |
| }) | |
| ) | |
| .then(json => { | |
| let time={ | |
| min: "000000", | |
| max: "999999" | |
| }; | |
| json.map(e => JSONstat(e).Dataset(0)).forEach((ds, i) => { | |
| if(sources[i].filter){ | |
| ds=ds.Slice(sources[i].filter); | |
| } | |
| const t=ds.Dimension(ds.role.time[0]).id.map(e => e.replace(/M/,"")); | |
| time.min=String(Math.max(Math.min(...t), time.min)); | |
| time.max=String(Math.min(Math.max(...t), time.max)); | |
| sources[i].time=t; | |
| sources[i].val=ds.value; | |
| }); | |
| //Crop series to common time | |
| sources.forEach(s=>{ | |
| const | |
| min=s.time.indexOf(time.min), | |
| max=s.time.indexOf(time.max)+1 | |
| ; | |
| s.time=s.time.slice(min, max); | |
| s.val=s.val.slice(min, max); | |
| }); | |
| /* Line chart */ | |
| visual({ | |
| lang: "en", | |
| title: "Consumer Price Index. 12-month rate", | |
| time: sources[0].time, | |
| unit: {label: "%"}, | |
| dec: 1, | |
| grid: { | |
| line: 5, | |
| shadow: 6, | |
| point: 0 | |
| }, | |
| type: "tsline", | |
| data: sources | |
| }); | |
| }) | |
| .catch(error => console.error(error)); | |
| </script> | |
| </body> | |
| </html> |