この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
jQureyを使ってJSON形式のデータを取得してUIを生成する方法をご紹介したいと思います。
JavaScriptソース
$(function(){
$.ajax({
type: "GET",
url: "category/list",
dataType:"json",
//データの取得後、htmlを生成
success: function(data){
$.each(data, function(i ,items){
$( " #category " ).append("<p><a>" + data[ i ].itemcategoryNm + "</a></p>")
.find("a").eq(i).attr({href: "searchResult.html"})
})
}
});
})getJSONメソッドだとうまくいかなかったのでajaxメソッドを使用しています。
↓ちなみにChromeでurlを指定するとJSONデータを表示することができます。
Top.html（通信Before）
<div id="category>
</div>※閉じタグをお忘れなく。
↓
Top.html（通信After）
<div id="category">
<p><a href="searchResult.html">お笑い</a></p>
<p><a href="searchResult.html">アクション</a></p>
<p><a href="searchResult.html">ロマンス</a></p>
<p><a href="searchResult.html">時代劇</a></p>
<p><a href="searchResult.html">ドラマ</a></p>
<p><a href="searchResult.html">アイドル</a></p>
<p><a href="searchResult.html">音楽</a></p>
</div>HTMLの生成部分に関してはjQuery日本語リファレンスをいつも参考にさせていただいています。