search
LoginSignup
279

More than 1 year has passed since last update.

posted at

updated at

Organization

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

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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
279