iPentec.com / Doc / JavaScript / XMLHttpRequest / JSON

JSONデータの処理

JSONファイルから読み込み
HTML中に記述
- 値の取得

JSONの読み込みと値の取得 - JavaScript

JavaScriptでJSONファイルを読み込み、値を取得するコードを紹介します。

概要

JavaScriptでJSONを扱う場合にはJSONオブジェクトを利用します。JSON形式のファイルを読み込んでオブジェクト形式でアクセスする場合は JSONオブジェクトのparse()メソッドを呼び出します。また、JavaScriptでJSONを取得するため、XMLHttpRequestを利用します。

補足

JSONがオブジェクトの配列の場合の読み込み方法はこちらの記事を、JSONが1つのオブジェクトで値が配列オブジェクトになっている場合はこちらの記事も参照して下さい。
また、HTMLファイル中に記述した、JSONオブジェクトを読み込む方法についてはこちらの記事を参照してください。

コード

以下のコードを記述します。

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
   function getJson() {
     var xmlhttp = new XMLHttpRequest();

     xmlhttp.onreadystatechange = function () {
       if (xmlhttp.readyState == 4) {
         if (xmlhttp.status == 200) {
           var data = JSON.parse(xmlhttp.responseText);

           var elem = document.getElementById("output_name");
           elem.innerText = data.name;
           var elem = document.getElementById("output_weight");
           elem.innerText = data.weight;
           var elem = document.getElementById("output_height");
           elem.innerText = data.height;
           var elem = document.getElementById("output_price");
           elem.innerText = data.price;
           var elem = document.getElementById("output_memo");
           elem.innerText = data.memo;
         } else {
         }
       }
     }
     xmlhttp.open("GET", "data.json");
     xmlhttp.send();
   }
  </script>

</head>
<body>
  <input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
  <hr />
  <div>受信情報</div>
  Name:<span id="output_name"></span><br />
  Height:<span id="output_height"></span><br />
  Weight:<span id="output_weight"></span><br />
  Price:<span id="output_price"></span><br />
  Memo:<span id="output_memo"></span><br />

</body>
</html>

data.json

{
  "name":"Penguin Statue",
  "height":20,
  "weight":0.25,  
  "price":1500,
  "memo":"かわいいペンギンの置物"
}

解説

HTMLファイルの以下のコードで記述されたボタンをクリックするとgetJson()関数を実行し、JSONファイルの読み込みをします。

  <input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />

 function getJson() {
   var xmlhttp = new XMLHttpRequest();

   xmlhttp.onreadystatechange = function () {
     if (xmlhttp.readyState == 4) {
       if (xmlhttp.status == 200) {
         var data = JSON.parse(xmlhttp.responseText);

         var elem = document.getElementById("output_name");
         elem.innerText = data.name;
         var elem = document.getElementById("output_weight");
         elem.innerText = data.weight;
         var elem = document.getElementById("output_height");
         elem.innerText = data.height;
         var elem = document.getElementById("output_price");
         elem.innerText = data.price;
         var elem = document.getElementById("output_memo");
         elem.innerText = data.memo;
       } else {
       }
     }
   }
   xmlhttp.open("GET", "data.json");
   xmlhttp.send();
 }

createXMLHttpRequest()関数やXMLHttpRequestの説明に関してはこちらの記事を参照してください。
XMLHttpRequestによるJSONファイルの取得が成功すると以下のコード実行し、取得したJSONをオブジェクトにパースします。パース結果のオブジェクトはdataに代入されます。

var data = JSON.parse(xmlhttp.responseText);

parseメソッドで取得したオブジェクトのプロパティにJSONの値が代入されています。以下のコードで、HTMLファイルの要素を取得しJSONの値を表示します。

  var elem = document.getElementById("output_name");
  elem.innerText = data.name;
  var elem = document.getElementById("output_weight");
  elem.innerText = data.weight;
  var elem = document.getElementById("output_height");
  elem.innerText = data.height;
  var elem = document.getElementById("output_price");
  elem.innerText = data.price;
  var elem = document.getElementById("output_memo");
  elem.innerText = data.memo;

実行結果

HTMLファイルを表示します。下図の画面が表示されます。

[JSON読み込み]ボタンをクリックします。JSONファイルが読み込まれ、各キーの値が表示されます。

参考: 旧バージョンのInternet Explorerに対応する場合

IE(Internet Explorer)に対応する場合は、new ActiveXObject() を利用してxmlhttpオブジェクトを作成する必要があります。
以下のコードがActiveXObject を利用してxmlhttpオブジェクト作成する例です。

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 <script type="text/javascript">
   function getJson() {
     var xmlhttp = createXMLHttpRequest(); //旧バージョンのIEなどに対応する場合

     xmlhttp.onreadystatechange = function () {
       if (xmlhttp.readyState == 4) {
         if (xmlhttp.status == 200) {
           var data = JSON.parse(xmlhttp.responseText);

           var elem = document.getElementById("output_name");
           elem.innerText = data.name;
           var elem = document.getElementById("output_weight");
           elem.innerText = data.weight;
           var elem = document.getElementById("output_height");
           elem.innerText = data.height;
           var elem = document.getElementById("output_price");
           elem.innerText = data.price;
           var elem = document.getElementById("output_memo");
           elem.innerText = data.memo;
         } else {
         }
       }
     }
     xmlhttp.open("GET", "data.json");
     xmlhttp.send();
   }

   function createXMLHttpRequest() {
     if (window.XMLHttpRequest) { return new XMLHttpRequest() }
     if (window.ActiveXObject) {
       try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch (e) { }
       try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch (e) { }
       try { return new ActiveXObject("Microsoft.XMLHTTP") } catch (e) { }
     }
     return false;
   }

  </script>

</head>
<body>

  <input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
  <hr />
  <div>受信情報</div>
  Name:<span id="output_name"></span><br />
  Height:<span id="output_height"></span><br />
  Weight:<span id="output_weight"></span><br />
  Price:<span id="output_price"></span><br />
  Memo:<span id="output_memo"></span><br />

</body>
</html>

このページのキーワード