「Webページを一部自動更新にする」という記事を書いたので、
今度はその応用としてJsonデータを定期的に読み込んでそれを画面表示するコードを実装する。
Jsonデータ
読み込むためのjsonファイルを作成する。
[
{
"name": "Tanaka",
"age": 69
},
{
"name": "Yoshida",
"age": 24
}
]
定期的に読み込む
前回までのおさらいを含めてざっと作成。
とりあえず問題ないかな？
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
<script type="text/javascript">
$(function(){
var $label = [];
$label.push($( "#Tanaka" ));
$label.push($( "#Yoshida" ));
$.PeriodicalUpdater('./data.json',{
method: 'get',
minTimeout: 1000,
type: 'json',
multiplier:1,
maxCalls: 0
},
function(data){
var len_data = data.length;
for( var i = 0; i < len_data; i++ ){
if( data[i].name == "Tanaka" ){
$label[0].text( data[i].name + " : " + data[i].age );
}else if( data[i].name == "Yoshida" ){
$label[1].text( data[i].name + " : " + data[i].age );
}
}
});
});
</script>
</head>
<body>
<div id="Tanaka"></div>
<div id="Yoshida"></div>
</body>
</html>
改良計画
下記部分はまだ簡略化できるはず。
特に label への処理にほぼ変更はないため積極的に処理をまとめたい。
for( var i = 0; i < len_data; i++ ){
if( data[i].name == "Tanaka" ){
$label[0].text( data[i].name + " : " + data[i].age );
}else if( data[i].name == "Yoshida" ){
$label[1].text( data[i].name + " : " + data[i].age );
}
}
ちょっと考え中。。