Column filtering using select menus(DataTables) - asp.net-mvc-3

Question

Good day!
I`m using MVC3 and jquery DataTables plugin. The point is to make column filtering with select menus(further multi-select).
Here is my JS, which is pretty similar to this DataTables example:
(function ($) {
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only want unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not want to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);
var sValue = aData[iColumn];
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData;
}
} (jQuery));
function fnCreateSelect(aData) {
var r = '<select><option value=""></option>', i, iLen = aData.length;
for (i = 0; i < iLen; i++) {
r += '<option value="' + aData[i] + '">' + aData[i] + '</option>';
}
return r + '</select>';
}
$(document).ready(function () {
var oTable = $('#dataTable').dataTable({
"sDom": 'W<"clear">lfrtip',
"sAjaxSource": '#Url.Action("ResourcesWorkflowData", "LineManager")',
"aoColumns": [
{ "sTitle": "User", "mData": "User" },
{ "sTitle": "Region", "mData": "Region" },
]
});
/* Add a select menu for each TH element in the table footer */
$("tfoot th").each(function (i) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
});
});
});
The problem is in my aaData. If i pass an array of arrays like this:
"aaData": [
['User1', 'Central'],
['User2', 'Central'],
]
Everything goes fine, but if i make array of objects like this:
"aaData": [
{
"User": "User1",
"Region": "Central",
},
{
"User": "User2",
"Region": "Central",
}
]
I get "Cannot read property 'length' of undefined " error in this line of js:
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
Why is this happening? I was trying to use some Add Ons like ColumnFilter or ColumnFilterWidgets but in both cases i got the some problem. Any suggestions please?

Answer 1

It looks like sValue is null, which means that one of your field in Json is null. Can you paste your full Json?
There is small hack for this kind of problem.
Just to make sure non fields are null you can write something simple like this:
User = SomeObject.User != null ? SomeObject.User : " ";
This should fix your issue as value won't be null anymore.