Skip to content

Instantly share code, notes, and snippets.

@badosa
Last active December 30, 2018 07:44
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/74b0ebf9b2401ac3ae96 to your computer and use it in GitHub Desktop.
Save badosa/74b0ebf9b2401ac3ae96 to your computer and use it in GitHub Desktop.
Children Aged 0-4 in 1900's Norway
<!DOCTYPE html>
<html>
<head>
<title>Getting a JSON-stat cell value without using a JS library</title>
<style>
p {
padding: 100px 40px;
text-align: center;
font: 40px Georgia, serif;
color: #a52a2a;
}
strong {
white-space: nowrap;
font-size: 300%;
}
</style>
<script>
/* Based on https://json-stat.org/tools/js */
function main( obj ){
//Validate jsonstat
var jsonstat=JSONstat( obj );
if( !jsonstat ){
return;
}
//Parse: Get value from jsonstat and query
var value=getValue( jsonstat , query );
//Write: Display result
show( value );
}
//getValue() converts a dimension/category object into a data value in three steps.
//Input example: {'concept':'UNR','area':'US','year':'2010'}
//Output example: 9.627692959
function getValue( jsonstat , query ){
//1. {'concept':'UNR','area':'US','year':'2010'} ==> [0, 33, 7]
var indices=getDimIndices( jsonstat , query );
//2. [0, 33, 7] ==> 403
var index=getValueIndex( jsonstat , indices );
//3. 403 ==> 9.627692959
return jsonstat.value[index];
}
//getDimIndices() converts a dimension/category object into an array of dimensions' indices.
//Input example: {'concept':'UNR','area':'US','year':'2010'}
//Output example: [0, 33, 7]
function getDimIndices( jsonstat , query ){
var
dim=jsonstat.dimension,
ids=jsonstat.id || dim.id
; //JSON-stat 2.0-ready
for( var arr=[], i=0, len=ids.length; i<len ; i++ ){
arr[i]=getDimIndex( dim , ids[i] , query[ids[i]] );
}
return arr;
}
//getValueIndex() converts an array of dimensions' indices into a numeric value index.
//Input example: [0, 33, 7]
//Output example: 403
function getValueIndex( jsonstat , indices ){
var size=jsonstat.size || jsonstat.dimension.size; //JSON-stat 2.0-ready
for( var i=0, ndims=size.length, num=0, mult=1; i<ndims; i++ ){
mult*=( i>0 ) ? size[ndims-i] : 1;
num+=mult*indices[ndims-i-1];
}
return num;
}
//getDimIndex() converts a dimension ID string and a category ID string into the numeric index of that category in that dimension.
//Input example: "area", "US"
//Output example: 33
function getDimIndex( dim , name , value ){
//In single category dimensions, "index" is optional
if( !dim[name].category.index ){
return 0;
}
var ndx=dim[name].category.index;
//"index" can be an object or an array
if( Object.prototype.toString.call(ndx) !== "[object Array]" ){ //Object
return ndx[value];
}else{ //Array
return ndx.indexOf( value ); //Polyfill required in old browsers
}
}
//Validate
function JSONstat( jsonstat ){
if( !jsonstat ){
window.alert( 'Error: no response could be retrieved.' );
return NULL;
}
//If no "class", "bundle" response:
//use the first dataset available
//(assuming single dataset bundle response)
//[Of course, it'd be better to add an argument
//to the function to pass a dataset ID if
//bundle responses must be properly supported.]
if( !jsonstat.class ){
jsonstat=jsonstat[Object.keys( jsonstat )[0]]; //Polyfill required in old browsers
}else{ //Verify it's a "dataset" response
if( jsonstat.class!=='dataset' ){
window.alert( 'Error: response was not a JSON-stat bundle or dataset response.' );
return NULL;
}
}
//Program requires "value" and "dimension" properties
if( !jsonstat.value || !jsonstat.dimension ){
window.alert( 'Error: response is not valid JSON-stat or does not contain required information.' );
return NULL;
}
return jsonstat;
}
//show() displays the result.
function show( result ){
document.getElementsByTagName('strong')[0].innerHTML=result.toLocaleString();
}
</script>
</head>
<body>
<p>Children aged 0-4 years in 1900 in Norway: <strong>...</strong></p>
<script>
var query={
'Alder': 'F00-04', //Age: 00-04
'Kjonn': '0', //Sex: Both sexes
'Tid': '1900', //Year: 1900
'ContentsCode': 'Personer' //People
};
</script>
<script src="https://data.ssb.no/api/v0/dataset/65195.json?callback=main"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment