从数组中的数组项中获取json项

我有一个数组的数组:

var json = {
    "music": {
        "albums": [{
            "name": "foo",
                "tracks": [{
                "name": "foo",
                    "ref": "1"
            }, {
                "name": "bar",
                    "ref": "2"
            }, {
                "name": "foobar",
                    "ref": "3"
            }]
        }, {
            "name": "bar",
                "tracks": [{
                "name": "f",
                    "ref": "1"
            }, {
                "name": "oo",
                    "ref": "2"
            }, {
                "name": "bar",
                    "ref": "3"
            }]
        }]
    }
};

可以看到，album是一个包含两个数组和一个name属性的数组。专辑中的数组被称为tracks，它保存了显示在dom上的专辑中的曲目。我想做的是用jquery修改dom，像这样:

var gridListMusic = $('#grid-listMusic');
var gridListMusicList = $('#grid-listMusic ul');
    function createAlbumSection(id) {
        gridListMusic.append('<div>' + id + '</div>');
        gridListMusic.append('<div class="grid-container">' + '<ul>' + '</ul>' + '</div');
        $.each(json.music.albums.tracks, function (index, value) {
            gridListMusicList.append('<li>' + value.name + '</li>');
        });
    }
    function jsonDo(data) {
        $.each(data.music.albums, function (index, value) {
            alert(value.name);
            if (typeof data.music.albums !== 'undefined') {
                createAlbumSection(value.name);
            }
        });
    }

这将像这样在DOM中插入div和ul:

<div>foo</div>
<div class="grid-container">
  <ul>
    <li>foo</li>
    <li>bar</li>
    <li>foobar</li>
  </ul>
</div>
<div>bar</div>
<div class="grid-container">
  <ul>
    <li>f</li>
    <li>oo</li>
    <li>bar</li>
  </ul>
</div>

然而，当我试图在<ul>中插入tracks时，我在控制台中得到这个错误:

Uncaught TypeError: Cannot read property 'albums of undefined