Conditional to Draw Certain Items from REST To Corresponding Tabbed DataTable

zgoforth

Hello,

I have a tabbed DataTable which I am populating through GETTING SharePoint list items through a REST API, everything on this SharePoint list is organized by a column/field with the title Department. In my tabbed DataTable each tab represents a different department. If Department == IT then it would post to the IT tab table. I cannot figure out how to write this conditional, do I call it in my success function of my AJAX call or in the actual DataTable function itself.

Here is an example of my JSON from the REST call:

{
  "d": {
    "results": [
      {
        "User": {
          "Id": 79,
          "Title": "Piers Charlotte"
        },
        "Monday": "2021-03-15T04:00:00Z",
        "MondayStatus": "P",
        "MondayLocation": "Office",
        "TuesdayStatus": "P",
        "TuesdayLocation": "Office",
        "WednesdayStatus": "P",
        "WednesdayLocation": "Office",
        "ThursdayStatus": "P",
        "ThursdayLocation": "Office",
        "FridayStatus": "P",
        "FridayLocation": "Office",
        "Tuesday": "2021-03-16T04:00:00Z",
        "Wednesday": "2021-03-17T04:00:00Z",
        "Thursday": "2021-03-18T04:00:00Z",
        "Friday": "2021-03-19T04:00:00Z",
        "Sunday": "2021-03-14T05:00:00Z",
        "Locations": "Mar-15: Office, Mar-16: Office, Mar-17: Office, Mar-18: Office, Mar-19: Office",
        "Department": "IT"
      },
      {
        "User": {
          "Id": 76,
          "Title": "Rokurou Aran"
        },
        "Monday": "2021-03-15T04:00:00Z",
        "MondayStatus": "P",
        "MondayLocation": "Office",
        "TuesdayStatus": "P",
        "TuesdayLocation": "Office",
        "WednesdayStatus": "P",
        "WednesdayLocation": "Office",
        "ThursdayStatus": "P",
        "ThursdayLocation": "Office",
        "FridayStatus": "P",
        "FridayLocation": "Office",
        "Tuesday": "2021-03-16T04:00:00Z",
        "Wednesday": "2021-03-17T04:00:00Z",
        "Thursday": "2021-03-18T04:00:00Z",
        "Friday": "2021-03-19T04:00:00Z",
        "Sunday": "2021-03-14T05:00:00Z",
        "Locations": "Mar-15: Office, Mar-16: Office, Mar-17: Office, Mar-18: Office, Mar-19: Office",
        "Department": "HR"
      }
    ]
  }
}

Here is my DataTable (putting it into a JSFiddle because it is too long to insert into post):
https://jsfiddle.net/x5zan69b/

kthorngren

Is this the same question as your other thread?

Please don’t post duplicate questions.

There are some choices. The solution you use is based on your environment and solution. Some options

1. Use a separate ajax request for each department to populate that Datatable.
2. In the success function create an object with the keys being the department. Loop through the response and append each row to the dept key. After the loop populate the datatable with the appropriate key.

Kevin

zgoforth

My apologies I made a new question because this one sat untouched for so long. I figured it was because I did not provide a working test case which I then took the time to create to ensure best feedback from y'all as possible. Ok, I will try and create a new test case with above suggestion. I am just confused as to how different AJAX calls will work since I am calling all from the same list

kthorngren

I figured it was because I did not provide a working test case which I then took the time to create to ensure best feedback from y'all as possible.

Its just that no one has had the chance to answer. We would definitely tell you that a test case is needed:)

Kevin

kthorngren

I am just confused as to how different AJAX calls will work since I am calling all from the same list

That would depend on your server environment. Are you able to send parameters with the department to filter the results?

Kevin

zgoforth

var uri = webAppUrl + "/_api/web/lists/getbytitle('MockMorningReport')/items?$select=User/Id,User/Title,Department,Locations,Sunday,Monday,MondayStatus,MondayLocation,Tuesday,TuesdayStatus,TuesdayLocation,Wednesday,WednesdayStatus,WednesdayLocation,Thursday,ThursdayStatus,ThursdayLocation,Friday,FridayStatus,FridayLocation&$expand=User";

    $.ajax({
                url: uri,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                       var table = $('#it').DataTable();
                       table.rows.add(data.d.results).draw();
                    }
                }
    });
    $.ajax({
                url: uri,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                       var table1 = $('#hr').DataTable();
                       table1.rows.add(data.d.results).draw();
                    }
                }
    });
    $.ajax({
                url: uri,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                       var table2 = $('#bd').DataTable();
                       table2.rows.add(data.d.results).draw();
                    }
                }
    });

Here is an example of the more than one AJAX call, I am unsure what you mean by calling the "keys" in the success function. Could I create a switch to use within the loadData function?

zgoforth

That would depend on your server environment. Are you able to send parameters with the department to filter the results?

My server environment is SharePoint

zgoforth

So the environment I am pulling it from is a SharePoint list located on the same level site collection. With this, I would only think I would need one AJAX request. I am seeing like 11 different requests in my Network Tab, all pulling the same information.

I came up with

$.ajax({
                url: uri,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
                    console.log(data);
                    for (i=0; i++; i > d.results.length) {
                    if (d.results[i].Department == "IT"){ 
                       var table = $('#it').DataTable();
                       table.rows.add(data.d.results).draw();
                    }
                }
                }
    });

but this doesn't populate anything to to the DataTable and leaves no errors. So I am confused.

kthorngren

There are lots of ways to handle this. They all use generic Javascript techniques and the best technique to use is based on your overall solution.

One way is to loop through all the data similar to what you have and add each row individually to the table using row.add(), no s after row. Something like this:

success: function(data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
    console.log(data);
    for (i=0; i++; i > data.d.results.length) {
        // Get lower case dept name to use for table ID
        var dept = data.d.results[i].Department.toLowerCase();
        
        // Get Datatable API
        var table = $('#' + dept).DataTable();
        
        // Add one row
        table.row.add(data.d.results[i]);
    }
}

I'm making some assumptions that the table IDs are all lower case and match the department name in the JSON data. Notice the removal of the chained .draw(). You will want to draw the table once after all the rows are added. Maybe when showing the tab. The code snippet might need work but I think its close.

Kevin