JavaScript
jQuery
JSON

jQuery で JSON ファイルを読み込む

More than 3 years have passed since last update.

JSONファイル読み込みのおさらいメモ。
下記ファイルを読み込みます。

data.json
[
  {"id":1,"name":"田中"},
  {"id":2,"name":"鈴木"},
  {"id":3,"name":"佐藤"}
]

これを、id を id属性に。name を li タグ内に表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function() {
  $.getJSON("data.json" , function(data) {
    var
      ulObj = $("#demo"),
      len = data.length;

    for(var i = 0; i < len; i++) {
      ulObj.append($("<li>").attr({"id":data[i].id}).text(data[i].name));
    }
  });
});
</script>
</head>
<body>
<ul id="demo"></ul>
</body>
</html>