【Java script問題集】1-5 jsonを読み込んでみよう＆1-6 初期表示時に、jsonで読み込んだデータをブラウザに表示してみよう

1-5~1-6.html

<!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("1-5.json" , function(data) {
    var
      ulObj = $("#test"),
      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="test"></ul>
</body>
</html>

1-5.json

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

実行結果

f:id:mkyosuke:20200629115909p:plain