Because JSON-stat uses a flat array for data, it's very easy to convert any JSON data structure to JSON-stat: you just need to flatten the data and provide the right metadata. This is exactly what it's shown in this example.
Compare the result with the original data.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>From Spanish INE's JSON to JSON-stat</title> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" type="text/css" href="/d/ed9665503abec4f542d1/style.css" /> | |
| <script src="https://cdn.jsdelivr.net/combine/npm/jsonstat@0.13.13,npm/jsonstat-utils@2.5.5"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <section id="tbrowser"></section> | |
| <script> | |
| var | |
| dataurl="https://servicios.ine.es/wstempus/js/es/DATOS_TABLA/4076?download=4076.json", | |
| metadata={ | |
| start: 2002, //First year | |
| label: "Población ocupada", | |
| source:'Instituto Nacional de Estadística <http://www.ine.es/jaxiT3/Tabla.htm?t=4076>', | |
| id: ["sexo", "edad", "unidad", "periodo"], | |
| size: [3, 13, 2, null], //time dimension size calculated dynamically | |
| role: { | |
| time: ["periodo"], | |
| metric: ["unidad"] | |
| }, | |
| dimension: { | |
| "sexo": { | |
| "label": "sexo", | |
| "category": { | |
| "index": [ | |
| "ambos sexos", | |
| "hombres", | |
| "mujeres" | |
| ] | |
| } | |
| }, | |
| "edad": { | |
| "label": "edad", | |
| "category": { | |
| "index": [ | |
| "Total", | |
| "De 16 a 19 años", | |
| "De 20 a 24 años", | |
| "De 25 a 29 años", | |
| "De 30 a 34 años", | |
| "De 35 a 39 años", | |
| "De 40 a 44 años", | |
| "De 45 a 49 años", | |
| "De 50 a 54 años", | |
| "De 55 a 59 años", | |
| "De 60 a 64 años", | |
| "De 65 a 69 años", | |
| "De 70 y más años" | |
| ] | |
| } | |
| }, | |
| "unidad": { | |
| "label": "unidad", | |
| "category": { | |
| "index": [ | |
| "Valor absoluto", | |
| "Porcentaje" | |
| ], | |
| "unit": { | |
| "Valor absoluto": { | |
| "label": "miles de personas", | |
| "decimals": 1 | |
| }, | |
| "Porcentaje": { | |
| "label": "%", | |
| "decimals": 1 | |
| } | |
| } | |
| } | |
| }, | |
| "periodo": { | |
| "label": "periodo", | |
| "category": { | |
| "index": [] //retrieved dynamically | |
| } | |
| } | |
| } | |
| }, | |
| tbrowser=document.getElementById("tbrowser") | |
| ; | |
| //Get data | |
| $.ajax( { url: dataurl } ) | |
| .done(function( data ) { | |
| buildTable( tbrowser, toJSONSTAT( metadata, flatten( data ) ) ); | |
| }) | |
| .fail(function(){ | |
| tbrowser.innerHTML="Connection failed: please, hit reload."; | |
| }) | |
| ; | |
| //Flatten INE's data | |
| function flatten( data ){ | |
| var value=[]; | |
| $.each( data, function( i, row ) { | |
| $.each( row.Data, function( j, col ) { | |
| value.push( col.Valor ); | |
| }); | |
| }); | |
| return value; | |
| } | |
| //Create time dimension from starting year and value size | |
| function timeDim( year, size ){ | |
| var t=[], q=1; | |
| for(;size--;q++){ | |
| t.unshift( year+"T"+q ); | |
| if(q===4){ | |
| q=0; | |
| year++; | |
| } | |
| } | |
| return t; | |
| } | |
| //Create JSON-stat from metadata+data | |
| function toJSONSTAT( meta, data ){ | |
| var time=timeDim( meta.start, data.length/( 3*13*2 ) ); | |
| //Update metadata with time dimension | |
| meta.dimension["periodo"].category.index=time; | |
| meta.size[3]=time.length; | |
| return JSONstat({ | |
| "version": "2.0", | |
| "class": "dataset", | |
| "label": meta.label, | |
| "source": meta.source, | |
| "value": data, | |
| "id": meta.id, | |
| "size": meta.size, | |
| "role": meta.role, | |
| "dimension": meta.dimension | |
| }); | |
| } | |
| //Build the dynamic table | |
| function buildTable( element, jsonstat ){ | |
| JSONstatUtils.tbrowser( | |
| jsonstat, | |
| element, | |
| { | |
| tblclass: "tbrowser", | |
| i18n: { | |
| locale: "es-ES", | |
| "msgs": { | |
| "dimerror": "Solamente se ha encontrado una dimensión en el conjunto de datos. Se requieren como mínimo dos.", | |
| "dataerror": "¡La selección no ha devuelto datos!", | |
| "source": "Fuente", | |
| "filters": "Filtros", | |
| "constants": "Constantes", | |
| "rc": "Filas y columnas", | |
| "na": "-", | |
| "urierror": "El formato de entrada no es correcto.", | |
| "selerror": "", | |
| "jsonerror": "" | |
| } | |
| } | |
| } | |
| ); | |
| } | |
| </script> | |
| </body> | |
| </html> |