StatApiMagic サンプルコード3 【 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属性にリクエスト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 = 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>