Почему я получаю список неопределенных данных, а не мой выпадающий список?

Question

У меня есть два select элемента на моем html, первый select должен быть заполнен данными из базы данных, а второй должен быть заполнен данными в зависимости от выбранного элемента первого select. Однако мне удалось получить значение для первого, и у меня возникли проблемы со вторым select, он возвращает неопределенное, с точным ожидаемым количеством элементов, но не отображает название элемента, просто отображает список неопределенных. Пожалуйста, помогите ... Вот код:

1. Html

<div class="row">
<div class="col-md-6">
    <div class="form-group">
        Category:
        <select asp-for="CategoryID" id="CategoryDD" class="form-control" asp-items="@(new SelectList(ViewBag.ListOfCategories,"CategoryID","CategoryName"))">
            <option value="">--Select Category--</option>
        </select>
    </div>

</div>
<div class="col-md-6">
    <div class="form-group">
        Item Name:
        <select asp-for="Id" id="ItemDD" class="form-control" asp-items="@(new SelectList("","Id","ItemName"))">
            <option value="">--Select Item--</option>
        </select>

    </div>
</div>

2. Jquery

$(document).ready(function () {
$("#CategoryDD").change(function () {
    console.log("Feching Items");
    $("#ItemDD").empty();
    $.ajax({
        type: "POST",
        url: "@Url.Action("GetItems")",
        dataType: "Json",               
        data: { id: $("#CategoryDD").val() },
        success: function (items) {
            console.log("Success!!!");
            $.each(items, function (i, item) {
                $("#ItemDD").append("<option value='"+item.Id+"'>"+ item.ItemName + "</option>");
            });
        },
        error: function (ex) {
            alert('Error Loading Items ' + ex);
        }
    });
    return false;
})

});

3. MVC Контроллер

    public JsonResult GetItems(int id)
    {
       var objSelectListItem = (from obj in _context.OrderItem.Where(cat => cat.CategoryID == id)

                             select new SelectListItem()
                             {
                                 Text = obj.ItemName,
                                 Value = obj.Id.ToString(),                                 
                             }).ToList();

        return Json(objSelectListItem);
    }    

Answer 1

Код теперь работает, как и ожидалось, я не могу поверить, что эта простая строка кода заставила меня работать 24 часа. Вот мой код решения:

Я изменил эту строку:

$("#ItemDD").append("<option value='"+item.Id+"'>"+ item.ItemName + "</option>");

На это:

 $.each(result, function (i, item) {
 $("#ItemDD").append($("<option></option>").val(item.value).html(item.text));

});