jQueryを使ってjsonファイルを読み込んで表示するコードを書いてみて勉強になりましたのでそのことを紹介しておきます。$.eachは使えるという話です。mapを使ってjoinさせたたりもできるのかと。
昨日、YungSangに「jQueryJSON好きでしょｗ」っていわれて、「好きですｗ。」って、ちょっとｊQueryでjson読み込んで表示させるためのコードを書いたのでこっちのブログでも書いておきます。
JSONHighslideJS: MT4Plugins::WEB DESIGN BLOGで使っているコードになります。読み込んでいるjsonはこちらの3ファイルjson | wedding | sample
HTMLコード
<div id="gallery">
<div id="gallery-inner">
<div id="gallery-nav">
<ul id="highslidetag">
<li><a href="#tagA">tagA</a></li><li><a href="#tagB">tagB</a></ll><li><a href="#tagC">tagC</a></li>
</ul>
</div>
<div id="images">gallery here!</div>
</div>
</div>
jQueryコード
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(function(){
$("ul#highslidetag li a").click(function(){
$("div#images").empty();
var tag = $(this).text();
var url = 'http://weblibrary.s224.xrea.com/mt4plugins/asset_'+tag+'.json';
$.getJSON(url, function(data){
var list = '<ul>';
$.each(data.items, function(i,item){
var title = (item.title) ? item.title : "none";
var url = item.url;
var img = item.thumbnail;
list += '<li><a href="'+url+'" class="highslide" onclick="return hs.expand(this)"><img src="';
list += img+'" alt="Highslide JS" title="Click to enlarge" height="100px" /></a><div class="highslide-caption"><p>';
list += title+'</p><ul id="assetexif">';
$.each(item.exifinfo, function(i,exif){
list+='<li><strong>'+i+'</strong>:'+ exif+'</li>';
});
list += '</ul></div></li>';
});
list+= '</ul>';
$("#images").append(list);
});
}).filter(':first').click();
});
</script>
$.eachをネストしてみたけど使えました。perlのハッシュからkey,valueの取り出しをjQueryだと
$.each(data,function(key,value){
$("body").append(key+'=>'+value);
});
でいけるってことでいいですね。ネストした$.eachで変数セットしてないんですけど、ちゃんと表示してくれています。ちょっと勉強になりました。
mapを使って、joinする方がいいのかなーとも。専門でないのでちょっとした疑問。
MovableTypeでは他にも最新記事リストをjsonで生成して使ってみたり、MTAuthor類のコードを使ってイントラネットでインデックスページに記事投稿者の顔写真と記事タイトルをjQueryプラグインinnerfadeを使っての誘導なんかでも使えそうな・・・（若手はじめ人材育成目的でランダムにAuthorを取り上げる。記事書いた昇順でとかなど。取り上げることでモチベーション上げるのが目的。）
使い方のヒント: MT4Plugins::WEB DESIGN BLOGギャラリー構築（JSON）で紹介しているコードです。
コメントする