Microsoft JScript runtime error: 'length' is null or not an object

JohnJJordan

I am attempting to use dataTable populated through an Ajax call to a WCF service. If I take the output (shown below) and past it into a Javascript file, the datatable seems to like it just fine. However if I get the data from the server as shown in the example below then I get the length is null or not an object error from within the Jquery library, I am using Datatable version 1.8.2 and JQuery 1.6.4.

// the datatable, see datatables.net for API
oTable = $('#output').dataTable({
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"bDeferRender": true,
"sAjaxSource": "service.svc/GetTestPolicies", //"script/getResults2.js", // change this to wcf.svc "service.svc/GetTestPolicies",
"sAjaxDataProp": "aaData", //"results.policies", //"aaData"
"bPaginate": true,
//"fnInitComplete": function(oSettings, json) { fnInitFacets(json); },
"sPaginationType": "full_numbers",
"aaSorting": [[8, 'desc']],
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "Title"},
{ "mDataProp": "State"},
{ "mDataProp": "HealthTopic"},
{ "mDataProp": "PolicyTopic"},
{ "mDataProp": "Type"},
{ "mDataProp": "Setting"},
{ "mDataProp": "Status"},
{ "mDataProp": "Year"},
{ "mDataProp": "Abstract", "bVisible": false},
{ "mDataProp": "ID", "bVisible": false}
]
});

{
"aaData": [
{
"Abstract": "This is a test",
"HealthTopic": "Obesity",
"ID": "1",
"PolicyTopic": "Policy Topic",
"Setting": "Childcare",
"State": "Georgia",
"Status": "Enacted",
"Title": "Title 1",
"Type": "Legislation",
"Year": "2011"
},
{
"Abstract": "This is a test",
"HealthTopic": "Physical Activity",
"ID": "2",
"PolicyTopic": "Policy Topic",
"Setting": "School",
"State": "Florida",
"Status": "Pending",
"Title": "Title 2",
"Type": "Regulation",
"Year": "2010"
}
]
}

By reading other discussion it seems that this is usually caused by some sort of errant comma or other formatting issue. I have looked for any extra commas, the case of the column names should be matching. So now I am at a bit of a loss.

Any help would be greatly appreciated.

Thanks

allan

You have: "bServerSide": true, but it doesn't look like a server-side processing response from the server, since fields such as sEcho and iDisplayRecords etc are missing: http://datatables.net/usage/server-side . Is it server-side processing you want?

Allan

JohnJJordan

Yes it is. So is it throwing the error because there is no iTotalDisplayRecords, sEcho, and iTotalRecords data in my JSON. The call to the service seems to be working fine. I had not coded the three fields yet until I knew I had the JSON correct. Since it worked not server side I may have made an incorrect assumption about the other two fields.

JohnJJordan

OK so I update my output from my server to the following. Unfortunately I am still getting the error

I am working with a small result set on purpose until such time that I can get this figured out. Normally I will have 1000's of potential results.

{
"aaData": [
{
"Abstract": "This is a test",
"HealthTopic": "Obesity",
"ID": "1",
"PolicyTopic": "Policy Topic",
"Setting": "Childcare",
"State": "Georgia",
"Status": "Enacted",
"Title": "Title 1",
"Type": "Legislation",
"Year": "2011"
},
{
"Abstract": "This is a test",
"HealthTopic": "Physical Activity",
"ID": "2",
"PolicyTopic": "Policy Topic",
"Setting": "School",
"State": "Florida",
"Status": "Pending",
"Title": "Title 2",
"Type": "Regulation",
"Year": "2010"
}
],
"iTotalDisplayRecords": "2000",
"iTotalRecords": "2000",
"sEcho": "1"
}

JohnJJordan

And now for some additional info...

The error is coming after the call to my service has completed. The location in the JQuery Library where the error is occurring is the following ( I know this is probably not completely helpful, but thought it I would include it just in case)
resolveWith:function(e,f){if(!d&&!b&&!c){f=f||[],c=1;try{while(a[0])a.shift().apply(e,f)}finally{b=[e,f],c=0}}return this}

the variables have the following values
e.url =
"service.svc/GetTestPolicies?
sEcho=1&
iColumns=11&
sColumns=&
iDisplayStart=0&
iDisplayLength=10&
mDataProp_0=null&
mDataProp_1=Title&
mDataProp_2=State&
mDataProp_3=HealthTopic&
mDataProp_4=PolicyTopic&
mDataProp_5=Type&
mDataProp_6=Setting&
mDataProp_7=Status&
mDataProp_8=Year&
mDataProp_9=Abstract&
mDataProp_10=ID&
iSortingCols=1&
iSortCol_0=8&
sSortDir_0=desc&
bSortable_0=true&
bSortable_1=true&
bSortable_2=true&
bSortable_3=true&
bSortable_4=true&
bSortable_5=true&
bSortable_6=true&
bSortable_7=true&
bSortable_8=true&
bSortable_9=true&
bSortable_10=true&
_=1323188363252"

f[0] =
{
"aaData":
[
{"Abstract":"This is a test","HealthTopic":"Obesity","ID":"1","PolicyTopic":"Policy Topic","Setting":"Childcare","State":"Georgia","Status":"Enacted","Title":"Title 1","Type":"Legislation","Year":"2011"},
{"Abstract":"This is a test","HealthTopic":"Physical Activity","ID":"2","PolicyTopic":"Policy Topic","Setting":"School","State":"Florida","Status":"Pending","Title":"Title 2","Type":"Regulation","Year":"2010"}
],
"iTotalDisplayRecords":"2",
"iTotalRecords":"2",
"sEcho":"1"
}

f[1] = success

c = 1


And once again here is the intialization of the datatable that I am using

// the datatable, see datatables.net for API
oTable = $('#output').dataTable({
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"bDeferRender": true,
"sAjaxSource": "service.svc/GetTestPolicies", //"script/getResults2.js", // change this to wcf.svc "service.svc/GetTestPolicies",
"sAjaxDataProp": "aaData", //"results.policies", //"aaData"
"bPaginate": true,
//"fnInitComplete": function(oSettings, json) { fnInitFacets(json); },
"sPaginationType": "full_numbers",
"aaSorting": [[8, 'desc']],
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "Title"},
{ "mDataProp": "State"},
{ "mDataProp": "HealthTopic"},
{ "mDataProp": "PolicyTopic"},
{ "mDataProp": "Type"},
{ "mDataProp": "Setting"},
{ "mDataProp": "Status"},
{ "mDataProp": "Year"},
{ "mDataProp": "Abstract", "bVisible": false},
{ "mDataProp": "ID", "bVisible": false}
]
});

So it basically appear that all of the data elements are cool. The JSONLint web site confirms that the JSON is valid. I now have the other required parameters and I have the record counts correct.

Unfortunately I am still getting the error. Any help would be greatly appreciated

Thanks

John

JohnJJordan

OK so more research...sorry for all of the updates...I downloaded the full version of the datatable library. The error is coming from the following

In the code below the aData is returning as undefined from the call fnDataSrc(json) in the _fnAjaxUpdateDraw method. The json looks as shown above and the oSettings.sAjaxDataProp is set to "aaData" - the default value

var fnDataSrc = _fnGetObjectDataFn(oSettings.sAjaxDataProp);
var aData = fnDataSrc(json);

for (var i = 0, iLen = aData.length; i < iLen; i++) {

JohnJJordan

Allan,

I now have a new question. For my table I am loading data from the WCF service. I am now loading the data fine thanks to your help. However now I have a new issue. When I load the data I was planning on using the fnInitComplete callback to send the rest of the JSON to some other control on the screen. This worked fine for when I was loading from a static js file. However now that I read the fine print I see that the json object on the callback is undefined...I am sure there is a perfectly good technical reason for this. However I do not want to make two calls to my service. The data that is being returned is based on a common set of parameters and it will put a needless load on my database. Is there a way around this limitation or do i just need to resolve myself to making the two calls?

JohnJJordan

Here is the call I am making on the server side processing ajax call

"fnInitComplete": function(oSettings, json) { alert('settings = ' + oSettings); alert(json); fnInitFacets(json); },

I am sure you already expect the alert on the json object comes back as undefined.

Thanks

allan

Hi John,

Good reuse of the the XHR this :-). As you are seeing when you have server-side processing enable, the JSON object isn't passed through. However, it is available through the settings object that is passed in as the first parameter. What DataTables does is that it stores the XHR object in the property "jqXHR" of the returned object. Thus what you can do is this:

[code]
"fnInitComplete": function ( oSettings ) {
var json = $.parseJSON(oSettings.jqXHR.responseText);
// ... Whatever you want to do with json
}
[/code]

I've put together an example here: http://live.datatables.net/iduwok/edit . Note that the parseJSON appears to be needed has jQuery doesn't hang on to the json object, just the response string.

Regards,
Allan

JohnJJordan

This works perfectly....thanks again

allan

My pleasure :-)

Regards,
Allan

vshitut

Hi JohnJJordan

I am getting the same error of ' 'length' is null or not an object'. You seems to have found the solution. Can you please let me know what was the solution ?

Regards,
Vivek