Reading data from an ajax call - data from sharepoint

In my Ajax success call (complete()), I want to use the data returned to build a table but not sure how to go about it.
How can i get the data?  It's coming from a SharePoint list.

http://isaac.issharepoint.com/ICTT/Shared%20Documents/modalTable.aspx

<!DOCTYPE html>

<html>
<head>
	<title></title>

<script>
	$(document).ready(function(){
		$('#example').DataTable({		
		"sDom": 'C<"isaac">lfrtip'
		})

		getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
	});


function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
function complete(data) {
 alert("Completed successfully.");
 }
function failure(data) {
 alert("Operation failed.");
 }

}


</script>
</head>
<body>
<!--
The ColVis extension adds an additional flag named "C" to the dom types.
The setting tells DataTables:
- Use the type C
- Create a div with the class "clear"
- The last option list are DataTable types / elements to set the order in which the elements are created

Should be:
<div class="wrapper">
      {length}
      {filter}
      {processing}
      {table}
      {information}
      {pagination}
    </div>
See:
https://datatables.net/reference/option/dom

HTH
Rainer
-->
<input type="button" value="Close" onclick="window.frameElement.cancelPopUp(); return false;" />
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
	<thead>
		<tr role="row">
			<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 137px;">Name</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 215px;">Position</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 102px;">Office</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Age</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 92px;">Start date</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 79px;">Salary</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th rowspan="1" colspan="1">Name</th>
			<th rowspan="1" colspan="1">Position</th>
			<th rowspan="1" colspan="1">Office</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Age</th>
			<th rowspan="1" colspan="1">Start date</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Salary</th>
		</tr>
	</tfoot>
	<tbody id="dtData">

	</tbody>
</table>

</body>

</html>

Open in new window

LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
it looks like you are using a content editor web part. The main problem is that you inserted a complete HTML document - therefore this page has two HTML opening tags, two heads, two body`s ...

Can you please try this:
<link rel="stylesheet" type="text/css" href="http://isaac.issharepoint.com/ICTT/SiteAssets/media/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="http://isaac.issharepoint.com/ICTT/SiteAssets/ColVis/css/dataTables.colVis.css" />
<script type="text/javascript" src="http://isaac.issharepoint.com/ICTT/SiteAssets/media/js/jquery.js"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/ICTT/SiteAssets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/ICTT/SiteAssets/ColVis/js/dataTables.colVis.js"></script>
<script type="text/javascript">
function CreateDataTable() {
	jQuery('#example').DataTable({		
		"sDom": 'C<"isaac">lfrtip'
	});

	getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
}

function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
	function complete(data) {
		alert("Completed successfully.");
	}
	function failure(data) {
		alert("Operation failed.");
	}
}
_spBodyOnLoadFunctionNames.push("CreateDataTable");

</script>

<input type="button" value="Close" onclick="window.frameElement.cancelPopUp(); return false;" />
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
	<thead>
		<tr role="row">
			<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 137px;">Name</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 215px;">Position</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 102px;">Office</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Age</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 92px;">Start date</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 79px;">Salary</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th rowspan="1" colspan="1">Name</th>
			<th rowspan="1" colspan="1">Position</th>
			<th rowspan="1" colspan="1">Office</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Age</th>
			<th rowspan="1" colspan="1">Start date</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Salary</th>
		</tr>
	</tfoot>
	<tbody id="dtData">

	</tbody>
</table>

Open in new window


And we cannot test as the api call requires authentication :-(

HTH
Rainer
IsaacSharePoint Client Side DeveloperAuthor Commented:
That was not the problem but now I get a different error.  Error: Object doesn't support property or method 'appendChild'.

Here's a snippet of code:

<script>
	$(document).ready(function(){
		$('#example').DataTable({		
		"sDom": 'C<"isaac">lfrtip'
		})

		getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
	});


function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
function complete(data) {


for(var i =0; i < data.d.results.length; i++) {

var tblData = "<tr>";
    tblData += "<td>"+data.d.results[i].State+"</td>";
    tblData += "<td>"+data.d.results[i].Town+"</td>";
    tblData += "<td>"+data.d.results[i].County+"</td>";
    tblData += "<td>"+data.d.results[i].NumberOfTrucks+"</td>";
    tblData += "</tr>";	
}

$(tblData).appendChild("#dtData");


 alert("Completed successfully.");
 }
function failure(data) {
 alert("Operation failed.");
 }

}


</script>

Open in new window

Rainer JeschorCommented:
Hi,
the appendChild is a DOM method, not jQuery method.
Instead of
$(tblData).appendChild("#dtData");

Open in new window

please try this:
$("#dtData").append(tblData);

Open in new window


HTH
Rainer

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
IsaacSharePoint Client Side DeveloperAuthor Commented:
That worked. Thanks!
IsaacSharePoint Client Side DeveloperAuthor Commented:
I may need your help again because even though the data now appears, it's acting weird.  When I try any of the dataTable functionality, all my data disappears.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.