2

Want to display Task and sub-task using the rest api jquery. My query string displays task and sub-task as individual unrelated task.

  • function onQuerySucceeded(data) { var mainTasks = []; var subTasks = []; for(var i = 0; i < data.length; i++) { if(data[i].ParentID.Id) { subTasks.push(data[i]); } else { mainTasks.push(data[i]); } } $("#divTaskItems").html(mainTasks); $("#divSubTaskItems").html(subTasks); } function onQueryFailed() { console.log('Error!'); } – Ben Segarra Nov 30 '18 at 17:16
  • above is the code I am using to bind data – Ben Segarra Nov 30 '18 at 17:17
  • You cannot directly put array variables in html. You need to iterate those array and write each value in html using javascript. – Ganesh Sanap Nov 30 '18 at 17:21
  • Check this and this link... How to bind data to html – Ganesh Sanap Nov 30 '18 at 17:25
  • function onQuerySucceeded(data) { var mainTasks = []; var subTasks = []; for(var i = 0; i < data.length; i++) { if(data[i].ParentID.Id) { subTasks.push(data[i]); } else { mainTasks.push(data[i]); } mainTasks.forEach(function(element) { $("#TaskItems").html(mainTasks); }); subTasks.forEach(function(element) { $("#SubTaskItems").html(subTasks); }); } } function onQueryFailed() { console.log('Error!'); } – Ben Segarra Nov 30 '18 at 17:44
1

In SharePoint Tasks List, for each subtask there is one hidden field ParentID in list. ParentID is maintained internally by SharePoint.

So, the list items having ParentID are the subtask. And you can group those subtasks based on ParentID using javascript code. Use below URL to get the ParentID of task items.

siteUrl/_api/web/lists/getbytitle('TasksList')/items?$select=*,ParentID/Id&$expand=ParentID

and then you can extract the main tasks and subtasks in separate arrays:

var mainTasks = [], subTasks = [];
for(var i = 0; i < data.length; i++) {
    if(data[i].ParentID.Id) {
        subTasks.push(data[i]);
    } else {
        mainTasks.push(data[i]);
    }
}
  • I tried your code and it did not work, the info would not display on my page. – Ben Segarra Nov 30 '18 at 17:09
  • Code <body> <div id="divTaskItems"></div> <div id="divSubTaskItems">/div> <p>Get Site List via REST API Call</p> – Ben Segarra Nov 30 '18 at 17:12
  • function getListData() { //var siteUrl = _spPageContextInfo.webAbsoluteUrl; var fullUrl = "myurl/_api/web/lists/getbytitle('Tasks')/items?$select=*,ParentID/Id&$expand=ParentID"; $.ajax({ url: fullUrl, type: "GET", headers: { "accept": "application/json;odata=verbose", "content-type": "application/json;odata=verbose", }, success: onQuerySucceeded, error: onQueryFailed }); } – Ben Segarra Nov 30 '18 at 17:13
  • function onQuerySucceeded(data) { var mainTasks = []; var subTasks = []; for(var i = 0; i < data.length; i++) { if(data[i].ParentID.Id) { subTasks.push(data[i]); } else { mainTasks.push(data[i]); } } $("#divTaskItems").html(mainTasks); $("#divSubTaskItems").html(subTasks); } – Ben Segarra Nov 30 '18 at 17:13
  • This code is just to retrieve the list items and find the subtasks. It will not write the tasks on your page automatically. You need to fetch the tasks using this code and then write logic to bind this data on your page. – Ganesh Sanap Nov 30 '18 at 17:14

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.