以前作成したjson読み込み処理に機能を追加してみました。
(※ 前のやつ → https://hacknote.jp/archives/22085/)
追加した機能としては
1) json が更新されたら再読み込みしなくても画面に変更内容を反映
2) Wikipedia へのリンク生成
という感じです。
■ test.json (※ 変わらず)
{
"室町幕府将軍" : [
{
"名前" : "足利尊氏"
, "生年" : 1305
, "死没" : 1358
}
, {
"名前" : "足利義詮"
, "生年" : 1330
, "死没" : 1367
}
, {
"名前" : "足利義満"
, "生年" : 1358
, "死没" : 1408
}
]
}
■ test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
setInterval(function() {
/* キャッシュ使用しないように */
var json_url = "test.json?" + Math.floor(1000 * Math.random()) ;
$.getJSON(json_url, function(data) {
$(".ins_data").remove() ;
var count = 0 ;
$(data.室町幕府将軍).each(function() {
$("#data_list").append("<tr id=\"data_id" + count + "\" class=\"ins_data\"></tr>") ;
$("#data_list #data_id" + count).append("<td>" + this.名前 + "</td>") ;
$("#data_list #data_id" + count).append("<td>" + this.生年 + " ～ " + this.死没 + "</td>") ;
$("#data_list #data_id" + count).append("<td><a href=\"https://ja.wikipedia.org/wiki/" + this.名前 + "\">リンク</a></td>") ;
count++ ;
})
})
}, 1000) ;
</script>
<title>タイトル</title>
</head>
<body>
<table>
<thead>
<tr>
<th>名前</th>
<th>生年 ～ 死没</th>
<th>wiki</th>
</tr>
</thead>
<tbody id="data_list">
</tbody>
</table>
</body>
</html>
