StatApiMagic.js のサンプルコード

StatApiMagic　サンプルコード３　【 jsonp版　応用編】

<html>
<head>
<meta charset="UTF-8">
<title>StatApiMagic.js　サンプルHTML（jsonp版　応用編）</title>
<script type="text/javascript" src="statapimagic-1.5.js"></script>
<script type="text/javascript">
function OnButtonClick(){

  document.getElementById('outputArea').innerText = '通信中。しばらくお待ちください...';

  //APIリクエストURLを取得
      　var index = document.myForm.sample.selectedIndex; 
  var req = document.myForm.sample.options[index].value; 
      req += document.getElementById('appid').value ; 

  // 新しいscript要素の生成
  var apiScript = document.createElement("script");
  // src属性にリクエストＵＲＬ追加
  apiScript.src = req; 
  // 要素の最後尾に追加;
  document.body.appendChild(apiScript);
}

function callback(jsonp){

  ///////////  option について  //////////////////
  //  1　：シンプルjson
  //  2　：シンプルjsonコード番号付
  //  3　：統計表情報付シンプルjson
  //  4　：統計表情報付シンプルjsonコード番号付
  //  5　：シンプルcsv
  //  6　：シンプルcsvコード番号付
  //  7　：統計表情報付シンプルcsv
  //  8　：統計表情報付シンプルcsvコード番号付
  //  0　：元のjson
  ////////////////////////////////////////////////
            
  var option = 0;

  if (document.getElementById("option1").checked == true){
    option = 1;
  }else if (document.getElementById("option2").checked == true){
    option = 2;
  }else if (document.getElementById("option3").checked == true){
    option = 3;
  }else if (document.getElementById("option4").checked == true){
    option = 4;
  }else if (document.getElementById("option5").checked == true){
    option = 5;
  }else if (document.getElementById("option6").checked == true){
    option = 6;
  }else if (document.getElementById("option7").checked == true){
    option = 7;
  }else if (document.getElementById("option8").checked == true){
    option = 8;
  }

  var simpleString = StatApiMagic(jsonp,option);

  //あとは、シンプル加工されたjson文字列を、再度パースするなりして自由にご活用ください。
  //var jsonParse = JSON.parse(simpleString);

  document.getElementById('outputArea').innerText = simpleString;
}
</script>
</head>
<body>
<h1>StatApiMagic.js　サンプルHTML（jsonp版　応用編）</h1>
<p>
<input type="text" id="appid" style="width:400px;" placeholder="取得したアプリケーションIDを入力">
</input>
</p>
<form name='myForm'>
<select name='sample'> 
<option value="https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?cdArea=26100&statsDataId=0003142173&callback=callback&appId=" selected>国勢調査　サンプル</option>
<option value="https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?&statsDataId=0003006357&startPosition=1&limit=100&callback=callback&appId=">労働力調査　サンプル</option>
<option value="https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?&statsDataId=0003111138&startPosition=1&limit=100&callback=callback&appId=">経済センサス基礎調査　サンプル</option>
<option value="https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?&statsDataId=0003061365&startPosition=1&limit=100&callback=callback&appId=">農林業センサス　サンプル</option>
<option value="https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?&cdArea=26100&statsDataId=0003111423&startPosition=1&callback=callback&appId=">学校基本調査　サンプル</option>
</select>
<p><input type="radio" name="radio" id="option0" checked>option0：　元のjson</p>
<p><input type="radio" name="radio" id="option1">option1：　シンプルjson</p>
<p><input type="radio" name="radio" id="option2">option2：　シンプルjson コード番号付</p>
<p><input type="radio" name="radio" id="option3">option3：　統計表情報付　シンプルjson</p>
<p><input type="radio" name="radio" id="option4">option4：　統計表情報付　シンプルjson コード番号付</p>
<p><input type="radio" name="radio" id="option5">option5：　シンプルCSV</p>
<p><input type="radio" name="radio" id="option6">option6：　シンプルCSV コード番号付</p>
<p><input type="radio" name="radio" id="option7">option7：　統計表情報付　シンプルCSV</p>
<p><input type="radio" name="radio" id="option8">option8：　統計表情報付　シンプルCSV コード番号付</p>
<p><input type="button" value="APIデータ取得" onclick="OnButtonClick()"></p>
</form>

<p id="outputArea" style="font-size:14px;"></p>

</body>
</html>
StatApiMagic サンプルコード３ 【 jsonp版 応用編 】

StatApiMagic　サンプルコード３　【 jsonp版　応用編】
