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

下のようなファイルを用意

■ test.json

{
    "室町幕府将軍" : [
        {
              "名前" : "足利尊氏"
            , "生年" : 1305
            , "死没" : 1358
        }
        , {
              "名前" : "足利義詮"
            , "生年" : 1330
            , "死没" : 1367
        }
        , {
              "名前" : "足利義満"
            , "生年" : 1358
            , "死没" : 1408
        }
    ]
}

jquery で読み込み、テーブルに反映させてみた

■ 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>
$(function() {
    $.getJSON("test.json", function(data) {
        var count = 0 ;
        $(data.室町幕府将軍).each(function() {
            $("#data_list").append("<tr id=\"data_id" + count + "\"></tr>") ;
            $("#data_list #data_id" + count).append("<td>" + this.名前 + "</td>") ;
            $("#data_list #data_id" + count).append("<td>" + this.生年 + " ～ " + this.死没 + "</td>") ;
            count++ ;
        })
    })
});
        </script>
        <title>タイトル</title>
    </head>
    <body>
    <table>
        <thead>
            <tr>
                <th>名前</th>
                <th>生年 ～ 死没</th>
            </tr>
        </thead>
        <tbody id="data_list">
        </tbody>
    </table>
    </body>
</html>

「data.室町幕府将軍」とかできるんですね。あんまり見ないですが。

つくってみた！

関連記事