株式会社オートプロジェクト

Columnコラム
2015年5月18日
JSONファイルを「$.ajax」で読み込む

JSONファイルを$.ajax で読み込む場合の基本。※chromeの場合、ローカルでは動かないので、Firefoxを使うこと。

sample.json 内に以下のJSONの記述を行う

[
{“id”:”160″,”newid”:”25″,”oldid”:”16″},
{“id”:”141″,”newid”:”25″,”oldid”:”16″},
{“id”:”135″,”newid”:”16″,”oldid”:”25″},
{“id”:”134″,”newid”:”25″,”oldid”:”16″},
{“id”:”115″,”newid”:”16″,”oldid”:”25″},
{“id”:”112″,”newid”:”16″,”oldid”:”25″},
{“id”:”111″,”newid”:”16″,”oldid”:”25″},
{“id”:”71″,”newid”:”25″,”oldid”:”16″}
]

読み込むHTMLファイルは下記のようにする。

<head><script src=”http://autoproject.sakura.ne.jp/imc_show/js/jquery.js”></script></head>

<body>
<script type=”text/javascript”>
$(function(){
$.ajax({
type: ‘GET’,
url: ‘sample.json’,
dataType: ‘json’,
success: function(json){
document.write(json[2].id);
}
});
});
</script>
</body></html>

json[2].id の箇所を

json[0].id や
json[1].newid

に変更することで任意の値を取得できる。

あとは、必要に合わせて成形していくことで、ブラウザに出力が可能となる。

  1. Ajax
  2. JSON