jQueryとajaxでJSONを読み込む
JSONを非同期で読み込む方法についてメモしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<!--jQueryを読み込んでおく-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$.ajax({
//読み込みたいローカルのjsonファイルを指定
url: 'data.json'
//urlは.doneでdata.jsonが変数jsonとして読み込まれる
}).done(function(json) {
for(var i=0; i<json.length; i++) {
$('#items').append(json[i].version + ' ' + json[i].codename + '<br>');
}
}).fail(function() {
$('#items').text('ERROR');
});
</script>
<div id="items"></div>
</body>
</html>
[
{
"version": "1.5",
"codename": "Cupcake"
},
{
"version": "1.6",
"codename": "Donut"
},
{
"version": "4.4",
"codename": "KitKat"
}
]
