JSでJsonを叩く(忘却録)

JS

こんかいはjqueryを使って初めてJsonを叩いたのでそれの覚え書きです。
特にjsonでの各部分へのアクセスで少し手惑いました(JS勉強不足です＞＜)

まずはJsonの中身
sample.json

{"hoge":[
    {
        "id":1,
        "name":"fuga",
        "genre":"meta"
    },
    {
        "id":2,
        "name":"piyo",
        "genre":"meta"
    }
]}

でJSのそーす

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./jquery-1.3.2.min.js"></script>
<script>
$(function(){
      var cnt = 0;
  $('#get_json').click(function(){
    var url = './sample.json';
    $.getJSON(url, function(data){
      for(var key in data){
        $('#result').append($('<p>').html(key +': '+ data[key][cnt].id
                                         +"  "+data[key][cnt].name+"  "+data[key][cnt].genre));
        cnt++;
      }
    });
  });
});
</script>
</head>
<body>
<button id="get_json">読み込み</button>
<div id="result" style="border: 2px solid #595">[result]</div>
</body>
<html>

実行結果
http://about-hiroppy.com/blog/20130414/