How to get data from an action method using AJAX in asp.net core?

Question

I'm trying to get all the tickets from an action method and return them as json to show them in the view. I wrote the code below but when I run this,it only shows the json without table.I want to get the data and show them in the table. This is the output that I get: This is the action:

 public IActionResult MyTickets(string filter = "", string orderByType = "")
    {
        System.Threading.Thread.Sleep(2000);
        var userId = User.FindFirst(ClaimTypes.NameIdentifier).Value;
        var myTickets = _ticketService.GetMyTickets(userId,filter,orderByType);  

        if(myTickets.Status == CallBackStatus.Success)
        {                
            var x = JsonSerializer.Serialize(myTickets.Model, new JsonSerializerOptions()
            {
                WriteIndented = true,
                ReferenceHandler = ReferenceHandler.Preserve
            });
            return Json(x);
        }
        else
        {
            return null;
        } 
    }

This the the view:

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>وضعیت</th>
                        <th>اولویت</th>
                        <th>کدپیگیری</th>
                        <th>تاریخ ایجاد</th>
                        <th>شخصی؟</th>
                        <th>مخاطب</th>
                        <th>نمایش پاسخ</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="BodyData" id="BodyData">
                </tbody>
            </table>
         <div id="DivLoading">
            <img src="~/images/loading.gif" />
        </div>

This is the ajax:

$(document).ready(function () {
            loadData();
        });
        function loadData() {
            $.ajax({
                url: "/Ticket/MyTickets",
                type: "Get",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (ListData, StatusText, jqXHR) {
                    alert("test");
                    console.log(ListData);
                    if (ListData.Error) {
                        DivError.innerHTML = ListData.Error;
                    }
                    var str = "";
                    for (var i in ListData) {                           
                        str += "<td>" + ListData[i].Status + "</td>";
                        str += "<td>" + ListData[i].priority + "</td>";
                        str += "<td>" + ListData[i].TrackingCode + "</td>";
                        str += "<td>" + ListData[i].CreateDate + "</td>";
                        str += "<td><a onclick=Edit(this) data-toggle='modal' data- 
                       target='#myModal'>ویرایش</a></td>";
                        str += "<td><a onclick=Remove(" + ListData[i].CommidityID + ")>حذف</a> 
                       </td>";
                        str += "</tr>";
                    }
                    BodyData.innerHTML = str;
                    $(".TblData tr").fadeIn(1000);

                },
                beforeSend: function (jqXHR, Setting) {
                    $("#DivLoading img").css({ "display": "none" });
                },
                error: function (jqxhr, status, errorMsg) {
                    alert(errorMsg);
                },
                complete: function (jqXHR, Status) {

                    $("#DivLoading").css({ "display": "none" });
                }
            });
        }

Answer 1

I see nothing wrong with your json return.

But you forgot opening tr on your ajax response.

Like

for (var i in ListData) {   
     str += "<tr>"; --> You missed this so you don't open tr tag
     -- data from json --
     str += "</tr>";
}