StatApiMagic.js のサンプルコード

StatApiMagic　サンプルコード５　【 json版　jqueryで通信制御】

<html>
<head>
<meta charset="UTF-8">
<title>StatApiMagic.js　サンプルHTML（json版　jqueryで通信制御）</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="statapimagic-1.5.js"></script>
<script type="text/javascript">
function OnButtonClick(){

  ////////////////　　ここはテスト用コード　　/////////////////////////////
  //リクエストURLの「limit数」を毎回変更するように，100000までの乱数を生成
  //（変更しないとキャッシュを読んでしまうのでテストにならないので。）
  var randomNum = Math.floor( Math.random() * 100000 );

  //変数「req」にAPIのリクエストURLを代入
  var req = 'https://api.e-stat.go.jp/rest/2.1/app/json/getStatsData?';  
      //各種パラメータを付加
      req += 'statsDataId=0003039916&limit='+ randomNum + '&appId='
      //統計APIのアプリケーションIDを付加
      req += document.getElementById('appid').value ; 

  document.getElementById('outputArea').innerText = '通信中...';

  ////////////////  　タイムアウト時間の取得 　 //////////////
  var time = 1000 ;    //1秒
  if (document.getElementById("timeout10000").checked == true){
    time = 10000 ;    //10秒
  }else if (document.getElementById("timeout30000").checked == true){
    time = 30000 ;    //30秒
  }

  ////////////////  jqueryのajax通信制御を利用  //////////////
  $.ajax({ 
                type:'GET',
                url: req , 
                dataType: 'json', 
                timeout: time,  // タイムアウトの時間（ミリ秒）
  }) 
      .done(function(responseData) {
    document.getElementById('outputArea').innerText = 'ブラウザ上でシンプル加工中...';
    var timer = function(){
      callback(responseData);
    }
    setTimeout(timer,100); //メッセージをちゃんと表示させたいので，setTimeoutで0.1秒後に起動
  })
            .fail(function(responseData){ 
    document.getElementById('outputArea').innerText = 'タイムアウトです。';
  }); 
}

function callback(json){

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

  var option = 5; 
  var simpleString = StatApiMagic(json,option); 
  document.getElementById('outputArea').innerText = simpleString;
}
</script>
</head>
<body>
<h1>StatApiMagic.js　サンプルHTML（json版　jqueryで通信制御） </h1>
<p>
<input type="text" id="appid" style="width:400px;" placeholder="取得したアプリケーションIDを入力">
</input>
</p>
通信タイムアウトの時間：　
<label><input type="radio" name="timeout" id="timeout1000" checked >1秒</label>
<label><input type="radio" name="timeout" id="timeout10000" >10秒</label>
<label><input type="radio" name="timeout" id="timeout30000" >30秒</label>
<p><input type="button" value="APIデータ取得" onclick="OnButtonClick()"></p>
<p id="outputArea" style="font-size:14px;"></p>
</body>
</html>
StatApiMagic サンプルコード５ 【 json版 jqueryで通信制御 】

StatApiMagic　サンプルコード５　【 json版　jqueryで通信制御】
