1

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 mowyah@gmail.com
                            */
                            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) {

        }
    });
0

You realize you are using multiple asynchronous functions?

I believe that if you stop to perform asynchronous loops within other asynchronous loops, you will laugh solve your problem.

I suggest that every asynchronous loop you call a function passing the data to the same continuity to the process. Ride your table only after all finalized loops, so you will have a construction standard of your html and probably it will be consistent.

Example: Each loop "each" do not wait for the previous completion and you will have the data "mixing".

I hope helped you.

  • Thanks for the insight. I figured out how to go about it by replacing the second asynchronous call with a function call and using a callback to return the data. – Muya George Jan 27 '16 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.