StatApiMagic サンプルコード4 【 json版 XMLHttpRequest 】

  • このコードのデモを見る
  • <html>
    <head>
    <meta charset="UTF-8">
    <title>StatApiMagic.js サンプルHTML (json版 XMLHttpRequest)</title>
    <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/json/getStatsData?';  
          //各種パラメータを付加
          req += '&cdArea=26100&statsDataId=0003111423&appId=';
          //統計APIのアプリケーションIDを付加
          req += document.getElementById('appid').value ; 
    
      /////////////   XMLHttpRequest    ///////////////
      var XMLhttpObject = new XMLHttpRequest();
      XMLhttpObject.open('GET',req,true);
      XMLhttpObject.onreadystatechange = function(){
        if (XMLhttpObject.readyState === 4 && XMLhttpObject.status === 200){
          callback(XMLhttpObject.responseText);
        }
      };
      XMLhttpObject.send(null);
    }
    
    function callback(jsonStr){
    
      ///  XMLHttpRequestを使う場合はサーバーでエンコードされた文字列がそのまま返ってくるので以下の処理が必要  ///
      jsonStr = jsonStr.replace( /\\/g , "%" ) ; //正規表現でバックスラッシュ(\)を「%」に置換(これをしないとデコードできない)
      jsonStr = unescape(jsonStr);               //文字列をデコード
      var jsonp = JSON.parse(jsonStr);           //デコードした文字列をパース
    
      ///////////  option について  //////////////////
      //  1 :シンプルjson
      //  2 :シンプルjsonコード番号付
      //  3 :統計表情報付シンプルjson
      //  4 :統計表情報付シンプルjsonコード番号付
      //  5 :シンプルcsv
      //  6 :シンプルcsvコード番号付
      //  7 :統計表情報付シンプルcsv
      //  8 :統計表情報付シンプルcsvコード番号付
      //  0 :元のjson
      ////////////////////////////////////////////////
                
      var option = 4;
      var simpleString = StatApiMagic(jsonp,option); 
    
      //あとは、シンプル加工されたjson文字列を、再度パースするなりして自由にご活用ください。
      //var jsonParse = JSON.parse(simpleString);
      
      document.getElementById('outputArea').innerText = simpleString;
    }
    </script>
    </head>
    <body>
    <h1>StatApiMagic.js サンプルHTML (json版 XMLHttpRequest)</h1>
    <p>
    <input type="text" id="appid" style="width:400px;" placeholder="取得したアプリケーションIDを入力">
    </input>
    </p>
    <p><input type="button" value="APIデータ取得" onclick="OnButtonClick()"></p>
    <p id="outputArea" style="font-size:14px;"></p>
    </body>
    </html>