构建级联列表的问题

我有一个json来自服务器(不能改变)，我需要建立一个嵌套的无序列表菜单。

这里是jsFiddle - warning!运行需要很长时间，这只是示例数据-实际数据要大得多。

不知何故，它搞砸了，我结束了许多东西不合适，它需要永远运行。

代码:

$.each(jData, function (k, v) {
    var vendor = JSON.stringify(k);
    vendor = vendor.replace(/"/g, '');
    var vendorRow = '<li data-vendor="' + vendor + '" class="listItem v">' + vendor + '</li>';
    $('ul#vendors').append(vendorRow);
    $('ul#vendors li[data-vendor="'+vendor+'"]').append('<ul class="sub hide"/>');
    var getArea = _.groupBy(jData[vendor], 'area');
    $.each(getArea, function(k, v) {
        var area = JSON.stringify(k);
        area = area.replace(/"/g,'');
        var thisArea = '<li data-area="'+area+'" class="listItem a">'+area+'</li>';
        $('ul#vendors li[data-vendor="'+vendor+'"] ul.sub').append(thisArea);
        $('ul#vendors li[data-area="'+area+'"]').append('<ul class="sub hide"/>');
        var getRegion = _.groupBy(getArea[area], 'region');
        $.each(getRegion, function(k, v) {
            var region = JSON.stringify(k);
            region = region.replace(/"/g,'');
            var thisRegion = '<li data-region="'+region+'" class="listItem a">'+region+'</li>';
            $('ul#vendors li[data-area="'+area+'"] ul.sub').append(thisRegion);
            $('ul#vendors li[data-region="'+region+'"]').append('<ul class="sub hide"/>');
            var getMarket = _.groupBy(getRegion[region], 'market');
            $.each(getMarket, function(k, v) {
                var market = JSON.stringify(k);
                market = market.replace(/"/g,'');
                var thisMarket = '<li data-market="'+market+'" class="listItem m">'+market+'</li>';
                $('ul#vendors li[data-region="'+region+'"] ul.sub').append(thisMarket);
                $('ul#vendors li[data-market="'+market+'"]').append('<ul class="sub hide"/>');
                var getSwitch = _.groupBy(getMarket[market], 'switch');
                $.each(getSwitch, function(k, v) {
                    var vSwitch = JSON.stringify(k);
                    vSwitch = vSwitch.replace(/"/g,'');
                    var thisSwitch = '<li data-switch="'+vSwitch+'" class="listItem s">'+vSwitch+'</li>';
                    $('ul#vendors li[data-market="'+market+'"] ul.sub').append(thisSwitch);
                });
            });
        });
    });
});

示例输出:

<div id="chartWizard">
    <ul id="vendors">
        <li class="listItem v" data-vendor="levdore">
            levdore
            <ul class="sub hide">
                <li class="listItem a" data-area="Midwest">
                    Midwest
                    <ul class="sub hide">...</ul>
                    <ul class="sub hide">...</ul>
                    <ul class="sub hide">...</ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

这个列表似乎在第2个ul处崩溃了。下标为多个ul。