StatApiMagic サンプルコード２ 【 jsonp版 jsonオブジェクトの要素データ取得 】
このコードのデモを見る
<html>
<head>
<meta charset="UTF-8">
<title>StatApiMagic.js サンプルHTML（jsonp版 jsonオブジェクトの要素データ取得）</title>
<style type="text/css">
th { border:1px solid; }
td { border:1px solid; }
</style>
<script type="text/javascript" src="statapimagic-1.5.js"></script>
<script type="text/javascript">
function OnButtonClick(){
//変数「req」にAPIのリクエストURLを代入
var req = 'https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?';
//各種パラメータを付加
req += 'statsDataId=0003148521&cdArea=00001&limit=816&callback=callback&appId=';
//統計APIのアプリケーションIDを付加
req += document.getElementById('appid').value ;
// 新しいscript要素の生成
var apiScript = document.createElement("script");
// src属性にリクエストＵＲＬ追加
apiScript.src = req;
// 要素の最後尾に追加;
document.body.appendChild(apiScript);
}
function callback(jsonp){
// もちろん、StatApiMagicを使わなくても、以下のように記述すればオブジェクトの値を取得することができます。
// var total = jsonp.GET_STATS_DATA.STATISTICAL_DATA.DATA_INF.VALUE[0]["$"]; （人口総数）
// var mTotal = jsonp.GET_STATS_DATA.STATISTICAL_DATA.DATA_INF.VALUE[2]["$"];（総数 男）
// var fTotal = jsonp.GET_STATS_DATA.STATISTICAL_DATA.DATA_INF.VALUE[4]["$"];（総数 女）
// var m00to04 = jsonp.GET_STATS_DATA.STATISTICAL_DATA.DATA_INF.VALUE[632]["$"];（０歳～４歳の男）
// …以下略
// でも、APIから取得したjsonpを見ながら、自分が使いたい要素を探し出して、正しくコーディングするのは至難の業。
// そんなときは、API Search Engine と StatApiMagic.js の出番です。
/////////// option について //////////////////
// 1 ：シンプルjson
// 2 ：シンプルjsonコード番号付
// 3 ：統計表情報付シンプルjson
// 4 ：統計表情報付シンプルjsonコード番号付
// 5 ：シンプルcsv
// 6 ：シンプルcsvコード番号付
// 7 ：統計表情報付シンプルcsv
// 8 ：統計表情報付シンプルcsvコード番号付
// 0 ：元のjson
////////////////////////////////////////////////
var simpleString = StatApiMagic(jsonp,1); //StatApiMagic関数に、jsonpとoptionを引数として入れる。
//StatApiMagicの戻り値はstringなので、パースを行いオブジェクトに変換します。
var jsonParse = JSON.parse(simpleString);
//jsonオブジェクトの各要素を取得します。API Search Engineの結果を見ながらコーディングすれば楽ちん。
var total = jsonParse[0]["値"];
var mTotal = jsonParse[2]["値"];
var fTotal = jsonParse[4]["値"];
var m00to04 = jsonParse[632]["値"];
var m05to09 = jsonParse[638]["値"];
var m10to14 = jsonParse[644]["値"];
var m15to19 = jsonParse[650]["値"];
var m20to24 = jsonParse[656]["値"];
var m25to29 = jsonParse[662]["値"];
var m30to34 = jsonParse[668]["値"];
var m35to39 = jsonParse[674]["値"];
var m40to44 = jsonParse[680]["値"];
var m45to49 = jsonParse[686]["値"];
var m50to54 = jsonParse[692]["値"];
var m55to59 = jsonParse[698]["値"];
var m60to64 = jsonParse[704]["値"];
var m65to69 = jsonParse[710]["値"];
var m70to74 = jsonParse[716]["値"];
var m75to79 = jsonParse[722]["値"];
var m80to84 = jsonParse[728]["値"];
var m85to89 = jsonParse[734]["値"];
var m90to94 = jsonParse[740]["値"];
var m95to99 = jsonParse[746]["値"];
var m100over = jsonParse[782]["値"];
var f00to04 = jsonParse[634]["値"];
var f05to09 = jsonParse[640]["値"];
var f10to14 = jsonParse[646]["値"];
var f15to19 = jsonParse[652]["値"];
var f20to24 = jsonParse[658]["値"];
var f25to29 = jsonParse[664]["値"];
var f30to34 = jsonParse[670]["値"];
var f35to39 = jsonParse[676]["値"];
var f40to44 = jsonParse[682]["値"];
var f45to49 = jsonParse[688]["値"];
var f50to54 = jsonParse[694]["値"];
var f55to59 = jsonParse[700]["値"];
var f60to64 = jsonParse[706]["値"];
var f65to69 = jsonParse[712]["値"];
var f70to74 = jsonParse[718]["値"];
var f75to79 = jsonParse[724]["値"];
var f80to84 = jsonParse[730]["値"];
var f85to89 = jsonParse[736]["値"];
var f90to94 = jsonParse[742]["値"];
var f95to99 = jsonParse[748]["値"];
var f100over = jsonParse[784]["値"];
var result = "<p>平成27年国勢調査結果 日本全体の人口総数は " + total + "人です。</p>";
result += "<table><tr><th>年齢区分</th><th>男性</th><th>女性</th></tr>";
result += "<tr><td>0歳～4歳</td><td>" + m00to04 + "</td><td>" + f00to04 + "</td></tr>";
result += "<tr><td>5歳～9歳</td><td>" + m05to09 + "</td><td>" + f05to09 + "</td></tr>";
result += "<tr><td>10歳～14歳</td><td>" + m10to14 + "</td><td>" + f10to14 + "</td></tr>";
result += "<tr><td>15歳～19歳</td><td>" + m15to19 + "</td><td>" + f15to19 + "</td></tr>";
result += "<tr><td>20歳～24歳</td><td>" + m20to24 + "</td><td>" + f20to24 + "</td></tr>";
result += "<tr><td>25歳～29歳</td><td>" + m25to29 + "</td><td>" + f25to29 + "</td></tr>";
result += "<tr><td>30歳～34歳</td><td>" + m30to34 + "</td><td>" + f30to34 + "</td></tr>";
result += "<tr><td>35歳～39歳</td><td>" + m35to39 + "</td><td>" + f35to39 + "</td></tr>";
result += "<tr><td>40歳～44歳</td><td>" + m40to44 + "</td><td>" + f40to44 + "</td></tr>";
result += "<tr><td>45歳～49歳</td><td>" + m45to49 + "</td><td>" + f45to49 + "</td></tr>";
result += "<tr><td>50歳～54歳</td><td>" + m50to54 + "</td><td>" + f50to54 + "</td></tr>";
result += "<tr><td>55歳～59歳</td><td>" + m55to59 + "</td><td>" + f55to59 + "</td></tr>";
result += "<tr><td>60歳～64歳</td><td>" + m60to64 + "</td><td>" + f60to64 + "</td></tr>";
result += "<tr><td>65歳～69歳</td><td>" + m65to69 + "</td><td>" + f65to69 + "</td></tr>";
result += "<tr><td>70歳～74歳</td><td>" + m70to74 + "</td><td>" + f70to74 + "</td></tr>";
result += "<tr><td>75歳～79歳</td><td>" + m75to79 + "</td><td>" + f75to79 + "</td></tr>";
result += "<tr><td>80歳～84歳</td><td>" + m80to84 + "</td><td>" + f80to84 + "</td></tr>";
result += "<tr><td>85歳～89歳</td><td>" + m85to89 + "</td><td>" + f85to89 + "</td></tr>";
result += "<tr><td>90歳～94歳</td><td>" + m90to94 + "</td><td>" + f90to94 + "</td></tr>";
result += "<tr><td>95歳～99歳</td><td>" + m95to99 + "</td><td>" + f95to99 + "</td></tr>";
result += "<tr><td>100歳以上</td><td>" + m100over + "</td><td>" + f100over + "</td></tr>";
result += "<tr><td>合計</td><td>" + mTotal + "</td><td>" + fTotal + "</td></tr></table>";
document.getElementById("outputArea").innerHTML = result ;
}
</script>
</head>
<body>
<h1>StatApiMagic.js サンプルHTML（jsonp版 jsonオブジェクトの要素データ取得）</h1>
<p><A target="_blank" href="../data.html?statsDataId=0003148521&statName=国勢調査&statName2=平成27年国勢調査 人口等基本集計（男女・年齢・配偶関係，世帯の構成，住居の状態など）&statTitle=年齢(各歳)，男女別人口，年齢別割合，平均年齢及び年齢中位数(総数及び日本人) 全国(市部・郡部)，都道府県(市部・郡部)，市区町村，平成12年市町村，人口集中地区">
（参考）こちらの統計表データの、地域指定「全国値のみ」を使用しています。</A></p>
<input type="text" id="appid" style="width:400px;" placeholder="取得したアプリケーションIDを入力">
<input type="button" value="APIデータ取得" onclick="OnButtonClick()">
<p id="outputArea" style="font-size:14px;"></p>
</body>
</html>