トップページ >  Ajax >  JSONを用いたサンプル
初版2009/10/01： 最終更新日2014/03/14
JSONを用いたサンプル
目次
・JSONを用いたサンプル
・JSONを用いたサンプルコード
・JSON形式のデータにアクセスする
JSONを用いたサンプル
データを取得する際、そのまま埋め込みますので悪意のあるデータがあれば、そのまま、実行されてしまいます。
そこで、表示する際はescapeHTML()を使い、エスケープして表示するようにしてください。

data.personals[i].name.escapeHTML()

JSONを用いたサンプルコード
サンプル

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="prototype_1.6.0.js"></script>
    <script type="text/javascript">
      function getPersonal() {
        new Ajax.Request('sample.json',{method:'get',onComplete:displayResult});
      }

      function displayResult(req) {
        var data = req.responseText.evalJSON();
        var html = '<table border="1">';
        html = html + '<tr><th>名前</th><th>年齢</th><th>性別</th></tr>';
        for (var i=0; i<data.personals.length;i++) {
          html = html + '<tr>';
          html = html + '<td>' + data.personals[i].name.escapeHTML() + '</td>';
          html = html + '<td>' + data.personals[i].age + '</td>';
          html = html + '<td>' + data.personals[i].sex.escapeHTML() + '</td>';
          html = html + '</tr>';
        }
        html = html + '</html>';
        $('result').innerHTML = html;
      }
    </script>
  </head>
  <body>
    <input type="button" value="情報を取得する" onclick="getPersonal()">
    <div id="result"></div>
  </body>
</html>

JSON形式のデータにアクセスする
JSON形式のデータにアクセスします。
以下のJSON形式を使用します。

var data =
[
    {
        "division": "営業部",
        "date": [
            {
                "080000": "08:00"
            },
            {
                "090000": "09:00"
            },
            {
                "100000": "10:00"
            }
        ]
    },
    {
        "division": "技術部",
        "schedule": [
            {
                "start": "080000"
            },
            {
                "end": "100000"
            }
        ]
    }
];

このJSONは2次元配列と同じ構造なので、data[0].divisionとすると、営業部が表示されます。
2次元なので、for文でループすることも可能です。

for(i in data){
  data[i].division;
}

data[1].schedule[0].startとアクセスすると080000が表示されます。
ただし、data[0].date[i]."080000"、または、data[0].date[i].080000とアクセスするとエラーとなってしまいました。キーには数値は指定できないようです。
試しにキーをa080000とするとアクセスすることができます。



以下、ソースです。

<script type="text/javascript">
function json() {
	var data =
	[
	    {
	        "division": "営業部",
	        "date": [
	            {
	                "a080000": "08:00"
	            },
	            {
	                "090000": "09:00"
	            },
	            {
	                "100000": "10:00"
	            }
	        ]
	    },
	    {
	        "division": "技術部",
	        "schedule": [
	            {
	                "start": "080000"
	            },
	            {
	                "end": "100000"
	            }
	        ]
	    }
	];

  for(i in data){
    alert(data[i].division);
  }
  
    alert(data[1].schedule[0].start);
    alert(data[0].date[0].a080000);
}
</script>

HOME