|
<!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> |