Want to display Task and sub-task using the rest api jquery. My query string displays task and sub-task as individual unrelated task.
4
-
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 SegarraCommented Nov 30, 2018 at 17:16
-
above is the code I am using to bind data– Ben SegarraCommented Nov 30, 2018 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 - MVPCommented Nov 30, 2018 at 17:21
-
Check this and this link... How to bind data to html– Ganesh Sanap - MVPCommented Nov 30, 2018 at 17:25
Add a comment
|
1 Answer
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]);
}
}
answered Nov 29, 2018 at 6:22
-
I tried your code and it did not work, the info would not display on my page. Commented Nov 30, 2018 at 17:09
-
Code <body> <div id="divTaskItems"></div> <div id="divSubTaskItems">/div> <p>Get Site List via REST API Call</p> Commented Nov 30, 2018 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 }); } Commented Nov 30, 2018 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); } Commented Nov 30, 2018 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. Commented Nov 30, 2018 at 17:14