スポンサーリンク

Jquery

jQueryでのjsonファイルの扱い

投稿日:

初めに

jQueryでのjsonファイルの扱いを覚書。
今後、絶対に使用するので。というか既に使用してますがやはり記載しておかないと忘れてしまうので。

jsonデータ

簡単なjsonになります。idとnameで取得を行っています。
ちなみにchromeのアドオンJSONViewを使用してますがこれがあるとすごく便利です。

[
  {"id":1,"name":"rule"},
  {"id":2,"name":"waku"},
  {"id":3,"name":"hoge"}
]



スポンサーリンク



Jquryの記述

<!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("sample.json" , function(data) {
    var
      ulObe = $("#sample"),
      len = data.length;

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

単純にgetJSONでファイルを取得し、forで1から3までのidとnameを取得しています。
まぁ基本になりますし。この文法だけでだいぶ助かりました。
参考URL:webOpixel


スポンサーリンク


Originally posted 2015-11-19 18:44:02.

スポンサーリンク

-Jquery
-, , ,

Copyright© office606 , 2017 All Rights Reserved Powered by STINGER.