jquery で json ファイルを読み込んだときのメモ②

かしこ 42views 更新:2016年9月12日

以前作成したjson読み込み処理に機能を追加してみました。

(※ 前のやつ → http://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>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません