Unable to populate data from fetchXML from Dynamics CRM and apply Filtering and sorting options.
Unable to populate data from fetchXML from Dynamics CRM and apply Filtering and sorting options.

Hi Guys,
please refer to the below code. I am developing a HTML Web Resource for a MS Dynamics CRM 365 online.
There is a function FetchData which fetches data. I am trying to set the data into the table but unable to do so.
If I am able to fetch data then I am unable to to implement initComplete as both are working async. Need assistance.
<script type="text/javascript">
// JavaScript source code
var isFetchComplete = 0;
var resLength = null;
function FetchData() {
var context = window.parent.Xrm.Page.context;
var webAPIPath = "/api/data/v8.1";
var guid = window.parent.Xrm.Page.data.entity.getId();
var tabledata = [];
var clientUrl = context.getClientUrl();
var fetchXML = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>" +
"<entity name='activitypointer'>" +
"<attribute name='activitytypecode' />" +
"<attribute name='subject' />" +
"<attribute name='statecode' />" +
"<attribute name='prioritycode' />" +
"<attribute name='modifiedon' />" +
"<attribute name='activityid' />" +
"<attribute name='instancetypecode' />" +
"<attribute name='community' />" +
"<attribute name='scheduledend' />" +
"<attribute name='createdby' />" +
"<order attribute='modifiedon' descending='false' />" +
"<filter type='and'>" +
"<condition attribute='isregularactivity' operator='eq' value='1' />" +
"</filter>" +
"<link-entity name='incident' from='incidentid' to='regardingobjectid' alias='an'>" +
"<attribute name='title' />" +
"<attribute name='ticketnumber' />" +
"</link-entity>" +
"<link-entity name='email' from='activityid' to='activityid' alias='anem' link-type='outer'>" +
"<attribute name='new_category' />" +
"</link-entity>" +
"<link-entity name='letter' from='activityid' to='activityid' alias='anle' link-type='outer'>" +
"<attribute name='new_category' />" +
"</link-entity>" +
"<link-entity name='phonecall' from='activityid' to='activityid' alias='anph' link-type='outer'>" +
"<attribute name='new_category' />" +
"</link-entity>" +
"</entity>" +
"</fetch>";
var uri = "/activitypointers?fetchXml=" + fetchXML;
// Construct a fully qualified URI if a relative URI is passed in.
if (uri.charAt(0) === "/") {
uri = clientUrl + webAPIPath + uri;
}
var request = new XMLHttpRequest();
request.open("GET", encodeURI(uri), true);
request.setRequestHeader("OData-MaxVersion", "4.0");
request.setRequestHeader("OData-Version", "4.0");
request.setRequestHeader("Accept", "application/json");
request.setRequestHeader("Content-Type", "application/json; charset=utf-8");
request.setRequestHeader("Prefer",
"odata.include-annotations=OData.Community.Display.V1.FormattedValue");
request.onreadystatechange = function () {
if (this.readyState === 4 && this.status===200) {
// request.onreadystatechange = null;
var response = JSON.parse(request.response).value;
if (response.length != 0 && response != null) {
resLength = response.length;
for (var i = 0; i < response.length; i++) {
resLength--;
var subject = response[i]["subject"];
var activityType = response[i]["activitytypecode@OData.Community.Display.V1.FormattedValue"];
var statecode = response[i]["statecode@OData.Community.Display.V1.FormattedValue"];
var priority = response[i]["prioritycode@OData.Community.Display.V1.FormattedValue"];
var duedate = response[i]["scheduledend"];
var createdby = response[i]["_createdby@OData.Community.Display.V1.FormattedValue"];
var category = null;
if (activityType == "Phone Call") {
category = response[i]["anph_x002e_new_category"];
}
else if (activityType == "Email") {
category = response[i]["anem_x002e_new_category@OData.Community.Display.V1.FormattedValue"];
}
else if (activityType == "Letter") {
category = response[i]["anle_x002e_new_category"];
}
var modifiedon = response[i]["modifiedon@OData.Community.Display.V1.FormattedValue"];
if (subject != null || subject != undefined) {
}
else {
subject = "NA";
}
if (priority != null || priority != undefined) {
}
else {
priority = "NA";
}
if (duedate != null || duedate != undefined) {
}
else {
duedate = "NA";
}
if (createdby != null || createdby != undefined) {
}
else {
createdby = "NA";
}
if (category != null || category != undefined) {
}
else {
category = "NA";
}
if (modifiedon != null || modifiedon != undefined) {
}
else {
modifiedon = "NA";
}
var row = [subject, activityType, statecode, priority, duedate, createdby, category, modifiedon];
tabledata[i] = row;
}
} //1
}
}
request.send(null);
return JSON.stringify(tabledata);
}
$(document).ready(function () {
var Fetcheddata = FetchData();
var table = $('MyTable').DataTable();
table.rows.add(Fetcheddata).draw();
//var p1 = new Promise(function (resolve, reject) {
// if (resLength <= 0) {
// resolve(this);
// }
//});
//p1.then(
//$('#MyTable').DataTable({
// data: Fetcheddata
// //initComplete: function () {
// // this.api().columns().every(function () {
// // var column = this;
// // var select = $('<select><option value=""></option></select>')
// // .appendTo($(column.header()))
// // .on('change', function () {
// // var val = $.fn.dataTable.util.escapeRegex(
// // $(this).val()
// // );
// // //to select and search from grid
// // column
// // .search(val ? '^' + val + '$' : '', true, false)
// // .draw();
// // });
// // column.data().unique().sort().each(function (d, j) {
// // select.append('<option value="' + d + '">' + d + '</option>')
// // });
// // });
// //}
//})
//);
});
</script>
<title></title>
</head>
<body>
<table id="MyTable" class="display" cellspacing="0" width="100%">
<thead><tr><th>Subject</th><th>Activity Type</th><th>Activity Status</th><th>Priority</th><th>Due Date</th><th>Created By</th><th>Category</th><th>Modified On</th></tr></thead>
<tbody>
</tbody>
</table>
</body>
</html>
This discussion has been closed.