StatApiMagic サンプルコード1 【 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(){
    
      //変数「req」にAPIのリクエストURLを代入
      var req = 'https://api.e-stat.go.jp/rest/2.1/app/jsonp/getStatsData?';  
          //各種パラメータを付加
          req += 'statsDataId=0003111423&cdArea=26100&startPosition=1&callback=callback&appId=';
          //統計APIのアプリケーションIDを付加
          req += document.getElementById('appid').value ; 
    
      // 新しいscript要素の生成
      var apiScript = document.createElement("script");
      // src属性にリクエストURL追加
      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 = 3;  //オプション番号を入れます(0~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>
    <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>