Error: Cannot read property length of undefined
Error: Cannot read property length of undefined
From the Chrome debug window, looking at the XHR returned from the web method call, the json getting returned looks like this:
{"d":"[{\"SerialNbr\":\"CNB9R03766\",\"BarCode\":\"00005691\",\"SubcategoryText\":\"Laser\",\"CategoryText\":\"Printers/Fax Machines\",\"BrandText\":\"HP\",\"ModelText\":\"LJ p2035n\",\"DispMethodText\":\"Auction(GovDeals)\",\"Archived\":\"2016-06-16T11:48:47.677\",\"InvArchiver\":\"AUSTIN\"}, etc...
Calling to a very simple asmx web service in an ASP.NET WebForms (not MVC) application.
[CODE}
var table = $('#tblData').DataTable({
"processing": true,
"bServerSide":true,
"sAjaxSource": "../InventorySite/services/ArchivedAll.asmx/GetArchivedAll",
"fnServerData": function (sSource, aoData, fnCallback) {
var jsonAOData = JSON.stringify(aoData.d);
$.ajax({
dataType: 'json',
contentType: "application/json; charset=utf-8",
type: "GET",
url: sSource,
data: "{jsonAOData : '" + jsonAOData + "'}",
success: function (msg) {
fnCallback(JSON.parse(msg.d));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
}
);
},
.. "aoColumns": [
{ "mData": "SerialNumber" },
{ "mData": "Barcode" },
{ "mData": "CategoryText" },
{ "mData": "SubcategoryText" },
{ "mData": "BrandText" },
{ "mData": "ModelText" },
{ "mData": "DispMethodText" },
{ "mData": "Archived" },
{ "mData": "InvArchiver" }
]
});
[/CODE]
Any feedback is greatly appreciated.
PS - I've been at this for literally 9 hours on a Saturday. Yes, I've read many, many, many forum posts here but have yet to resolve the problem. Posting this is absolutely the last resort. Thanks.
Answers
Update.
I've simplified the code. Gotten rid of serverside, etc No longer getting the Cannot Read Property Length of Undefined error.
JSON still looks the same.
Page loads. I see the JSON in the debugger, but the table remains empty with the message "No Data Available In Table"
[CODE]
var table = $('#tblData').DataTable({
ajax: {
url: '../InventorySite/services/ArchivedAll.asmx/GetArchivedAll',
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
dataSrc:"",
"data": function (d) {
return JSON.stringify(d);
}
}
[/CODE]
Thanks again.
SOLVED
This StackOverflow described building the table elements first, then binding to the DataTable
This StackOverflow described needing an inner loop and and outer loop to handle how my data was structured
[CODE]
$.ajax({
type: 'GET',
url: '../InventorySite/services/ArchivedAll.asmx/GetArchivedAll',
dataType: 'json',
contentType: "application/json",
dataSrc:"",
success: function (data) {
var ii = 0;
[/CODE]
I'm not thrilled with having to loop over the results and build out the table elements manually, but it works, and the columns sort and the search works.
SOLVED Part II
I would really appreciate some feedback. The outer/inner loop model illustrated above is PAINFULLY slow; approximately 10 second delay to load 6300 records. The stored procedure that fetches the data returns in < 1 second.