I am retrieving data from my SharePoint site and printing it to a html table. The problem is that at times, when I print the data I fetched, my code fails to print all the data I expected. I have three items in task groups list. I expect them to be printed but the code prints either the three of them, a combination of two or just one. What could be the cause of this inconsistency? Please see my code below
//fetch task list, begin by getting the groups first
$.ajax({
url: serverURL + "_api/web/lists/getbytitle('Task Groups')/items?$Filter=Project eq "+PROJECT_ID,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
var TaskGroups = data.d.results;
var TasksHTML = '<h3>Project Task List</h3>';
TasksHTML = TasksHTML+'<table class="table table-codensed table-hover table-bordered">';
TasksHTML = TasksHTML+'<tr><th>#</th><th>Task</th><th>Start Date</th><th>End Date</th></tr>';
$.each(TaskGroups, function(groupID, group){
//then get the individual tasks
$.ajax({
url: serverURL + "_api/web/lists/getbytitle('Project Tasks')/items?$Filter=Task_x0020_Group eq "+group.Id,
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
success: function (data) {
TasksHTML = TasksHTML+'<tr><td>'+(groupID+1)+'</td><td colspan="3">'+group.Title+'</td></tr>';
var Tasks = data.d.results;
$.each(Tasks, function(taskID, task){
//populate the Tasks
TasksHTML = TasksHTML+'<tr><td>'+(groupID+1)+'.'+taskID+1+'</td>';
TasksHTML = TasksHTML+'<td>'+task.Title+'</td>';
TasksHTML = TasksHTML+'<td>'+task.Start_x0020_Date+'</td>';
TasksHTML = TasksHTML+'<td>'+task.End_x0020_Date+'</td></tr>';
TasksHTML = TasksHTML+'<tr><td colspan="4"><a href="#" class="addtask" data-groupID="'+group.Id+'"></a></td></tr>';
/**
* jQuery is asynchronous, we thus have to test if this is the last record so that we can print
* we print if this is the last task in the last group or if this is the last group and it has no tasks
* @author Muya George [email protected]
*/
if (groupID == TaskGroups.length-1 && taskID == Tasks.length-1) {
TasksHTML = TasksHTML+'<tr><td colspan="4"><a href="#" class="addgroup" data-projectid="'+PROJECT_ID+'">Add group</a></td></tr>';
TasksHTML = TasksHTML+'</table>';
$('#categories-content-pane').html(TasksHTML);
}
});
if (Tasks.length == 0) {
TasksHTML = TasksHTML+'<tr><td colspan="4"><a href="#" class="addtask" data-groupID="'+group.Id+'">Add Tasks</a></td></tr>';
}
if (groupID == TaskGroups.length-1 && Tasks.length == 0) {
TasksHTML = TasksHTML+'<tr><td colspan="4"><a href="#" class="addgroup" data-projectid="'+PROJECT_ID+'">Add group</a></td></tr>';
TasksHTML = TasksHTML+'</table>';
$('#categories-content-pane').html(TasksHTML);
}
},
error: function (data) {
}
});
});
if (TaskGroups.length == 0) {
TasksHTML = TasksHTML+'<tr><td colspan="4"><a href="#" class="addgroup" data-projectid="'+PROJECT_ID+'">Add group</a></td></tr>';
TasksHTML = TasksHTML+'</table>';
$('#categories-content-pane').html(TasksHTML);
}
},
error: function (data) {
}
});
