Ajax- DataTable Not Nowrking - ajax

Question

I'm processing the incoming data with Ajax as follows. But I can't make it compatible with dataTable. I've read the Datatable Ajax documentation. But I was never successful. How do I pull the following data into the dataTable? I want to make these codes compatible for Data Table.
You can see multiple parse operations in my code. Please do not warn about it. Net Core, I can only process the JSON file in this way. The only thing I want from you is to show this data that I have processed successfully in the datatable.
<div class="card" id="view-maincategorylist">
<div class="card-body">
<div class="table-responsive">
<table id="datatablex" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th class="text-center">Fotoğraf</th>
<th class="text-center">Ana Kategori Adı</th>
<th class="text-center">Seçenekler</th>
<th class="text-center">İşlemler</th>
</tr>
</thead>
<tbody id="table-maincategories">
</tbody>
</table>
</div>
</div>
</div>
<script>
function GetMainCategoryList() {
$.ajax({
url: "/Admin/BusinessCategories/MainCategories/",
contentType: "application/json",
dataType: "json",
type: "Get",
success: function (data) {
var item = jQuery.parseJSON(data);
$("#table-maincategories").empty();
$.each(JSON.parse("[" + item + "]"), (index, value) => {
for (let element of value) {
$("#table-maincategories").append(`<tr class="text-center">
<td><img src="${element.Image}" style="height:80px;" /></td>
<td>${element.Name}</td>
<td>
<div class="form-check">
<a href="/Admin/BusinessCategories/MainShowMenu/${element.Id}" onclick="location.href=this.href;">
<input class="form-check-input" type="checkbox" id="flex_${element.Id}">
</a>
<label class="form-check-label" for="flex_${element.Id}">Menüde Göster</label>
</div>
</td>
<td>
<a onclick="ShowEditMainCategory(${element.Id})" class="btn btn-primary"><i class="bx bx-edit"></i> Düzenle</a>
<a onclick="DeleteMainCategory(${element.Id});" data-name="${element.Name}" id="del_${element.Id}" class="btn btn-danger delete-button"><i class="bx bx-trash"></i> Sil</a>
</td> </tr>`);
var checkbox = document.getElementById('flex_' + element.Id);
if (element.ShowMenu == true) {
checkbox.checked = true;
}
else {
checkbox.checked = false;
}
}
});
$('#datatable').DataTable();
ViewShowHide(1);
},
error: function () {
Swal.fire('Veriler Okunamadı!', '', 'error')
}
})
}
</script>
Problem Images:
image 1
image 2
image 3
JSON Data Output:
https://easyupload.io/1bsb75