DataTable Won't Populate JSON Object to Table
DataTable Won't Populate JSON Object to Table
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"
}
]
}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Now this is the only error I am getting?
Uncaught TypeError: Cannot read property 'Url' of undefined
As I mentioned in your other thread you need to change
data.datain the statementtable.rows.add( data.data )to match your structure. So you will usetable.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.
Good question. Which line does it point too? I don't see "Url" anywhere in the above code.
Kevin
@kthorngren You are a genius