DataTable Won't Populate JSON Object to Table

zgoforth

Hello, so I was having issues with my DataTable, and now I fixed the main issue I was facing which was getting the Data to return from Sharepoint as JSON, but now it finally does. But now, it still will not populate to the data table.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
</table>
</div>
<style>
div.container {
    min-width: 980px;
    margin: 0 auto;
}
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
</style>
<script>
function loadData() {
    var urls = ["https://x.sharepoint.com/sites/Projects/USMC/AMMO/_api/web/lists/getbytitle('AMMODeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", "https://x.sharepoint.com/sites/Projects/USMC/DARQ/_api/web/lists/getbytitle('DarQDeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", "https://x.sharepoint.com/sites/Projects/USMC/WTBn/_api/web/lists/getbytitle('WTBnDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"];
       
    for (i=0; i < urls.length; i++) {
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) {
          data = data;
          var table = $('#myTable').DataTable();
          table.rows.add( data.data ).draw();
        }
      }); 
    }
}
$(document).ready(function() {
    
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program" },
      { "data": "Deliverable" },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ]
  } );
    
 loadData();
    
} );
</script>

Here is what is being returned in the console its a JSON Object

{
   "value":[
      {
         "Notes":"Example Notes\n",
         "Approved":"Yes",
         "Program":"AMMO",
         "Date":"12/23/2018",
         "To":"example@example.com",
         "Deliverable":"Monthly Status Report (MSR)"
      },
      {
         "Notes":"Example Notes\n",
         "Approved":"Yes",
         "Program":"AMMO",
         "Date":"03/30/2020",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      },
      {
         "Notes":"Example Notes\n",
         "Approved":"Yes",
         "Program":"AMMO",
         "Date":"12/23/2018",
         "To":"example@example.com",
         "Deliverable":"Monthly Status Report (MSR)"
      },
      {
         "Notes":"Example Notes\n",
         "Approved":"Yes",
         "Program":"AMMO",
         "Date":"03/30/2020",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      }
   ]
}

{
   "value":[
      {
         "Notes":"Example Notes\n",
         "Approved":"Yes",
         "Program":"DAR-Q",
         "Date":"12/23/2018",
         "To":"example@example.com",
         "Deliverable":"Monthly Status Report (MSR)"
      },
      {
         "Notes":"Example Notes",
         "Approved":"Yes",
         "Program":"DAR-Q",
         "Date":"12/3/2017",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      },
      {
         "Notes":"Example notes.",
         "Approved":"Yes",
         "Program":"DAR-Q",
         "Date":"03/30/2020",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      },
      {
         "Notes":"Example notes",
         "Approved":"No",
         "Program":"DAR-Q",
         "Date":"02/20/2020",
         "To":"example@example.com",
         "Deliverable":"Monthly Status Report (MSR)"
      }
   ]
}

{
   "value":[
      {
         "Notes":"Example Notes",
         "Approved":"No",
         "Program":"WTBn",
         "Date":"4/17/2020",
         "To":"example@example.com",
         "Deliverable":"Monthly Status Report (MSR)"
      },
      {
         "Notes":"Example Notes\n",
         "Approved":"Yes",
         "Program":"WTBn",
         "Date":"12/23/2018",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      },
      {
         "Notes":"example notes",
         "Approved":"Yes",
         "Program":"WTBn",
         "Date":"4/17/2020",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      },
      {
         "Notes":"Example notes\n",
         "Approved":"Yes",
         "Program":"WTBn",
         "Date":"05/12/2020",
         "To":"example@example.com",
         "Deliverable":"Meeting Minutes"
      }
   ]
}

zgoforth

Now this is the only error I am getting?

Uncaught TypeError: Cannot read property 'Url' of undefined

kthorngren

As I mentioned in your other thread you need to change data.data in the statement table.rows.add( data.data ) to match your structure. So you will use table.rows.add( data.value )

I assume you are posting three different JSON responses above. If its all in one then you have invalid JSON structure.

Uncaught TypeError: Cannot read property 'Url' of undefined

Good question. Which line does it point too? I don't see "Url" anywhere in the above code.

Kevin

zgoforth

@kthorngren You are a genius