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>