Append LI to UL in jquery

I have two unordered lists, one called ulPArent the other ulSub when the user clicks on any of the LI inside ulParent an ajax request is called which passes in the chosen ulParent id and returns all sub categories associated with it from the database, I'm then trying to loop through the sub categories and append them to the ulSub below is how the HTML looks

        <div class="col-md-4 margintop20">
            <ul class="nav nav-pills nav-stacked " id="ulParent" style="max-height: 300px;overflow: auto;">
                <li class="displaynone"></li>
                @foreach (var item in Model)
                {
                    <li data-grid-id="@item.CategoryId"><a href="#">@item.CategoryDescription <span class="glyphicon glyphicon-chevron-right"></span></a></li>
                }
            </ul>
        </div>
        <div class="col-md-4 margintop20">
            <ul class="nav nav-pills nav-stacked" id="ulSub" style="max-height: 300px;overflow: auto;">

            </ul>
        </div>

below is where I'm trying to append the returned list of subcategories

  function getSubCategories(id) {

        var t;

        $.ajax({
            url: '@Url.Action("GetSubCategories", "Sell")',
            type: "POST",
            data: { "parentId": id },
            success: function (result) {
                if (result.success) {
                    var data = result.list;

                    $.each(data, function (i, item) {
                        t += '<li data-grid-id="' + item.CategoryId + '"><a href="#">' + item.CategoryDescription + '<span class="glyphicon glyphicon-chevron-right"></span></a></li>';
                    });

                    $("#ulSub ul li").append(t);

                }
                else {
                    $('#lblError').click();
                }
            }
        });
    }

But the above does not append to ulSub? I put an alert on t to see what values it had and below is the outcome

undefined<li data-grid-id="26"><a href="#">Canvas & Giclee Prints<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="27"><a href="#">Drawings<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="28"><a href="#">Folk Art<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="29"><a href="#">New Media & Digital Art<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="30"><a href="#">Paintings<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="31"><a href="#">Photographs<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="32"><a href="#">Posters<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="33"><a href="#">Prints<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="34"><a href="#">Sculptures<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="35"><a href="#">Self-Representing Artists<span class="glyphicon glyphicon-chevron-right"></span></a></li><li data-grid-id="36"><a href="#">Other<span class="glyphicon glyphicon-chevron-right"></span></a></li>

So I can see the LI is being built up, but I've noticed the word undefined and im not sure what is causing the issue?

Any help would be appreciated.

Solution

your var t is not initialized with an empty string so javascript set a default value as undefined to it, to overcome this issue you can initialize it with an empty string value:

var t='';

and in your success function your selector is not correct, you have a blank ul and you are appending generated lis to $("#ulSub ul li") which is not available at the moment, so instead you have to change your selector like this:

$("#ulSub").append(t);

Another way to append is something like this:

success: function (result) {
   if (result.success) {
      var data = result.list,
          $ulSub = $("#ulSub"); // cache your Ul id here
      $.each(data, function (i, item) {
          $ulSub.append( // append directly here
            '<li data-grid-id="' + item.CategoryId + 
            '"><a href="#">' + item.CategoryDescription + 
            '<span class="glyphicon glyphicon-chevron-right"></span></a></li>');
      });
    } else {
      $('#lblError').click();
    }
}