Uncaught TypeError: Cannot read property 'length' of undefined

chrisbo

I am just trying do do a proof of concept setting up a Datatable that uses AJAX and JSON. When I pass back my Json string I get the following error.

Error I receive:

jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'length' of undefined
    at VM232 jquery.dataTables.min.js:62

I believe my JSON is in the correct format but clearly something is incorrect.

My Basic Table:

$(document).ready(function () {
        $('#example').dataTable({
            "searching": false,
            "ordering": false,
            "ajax": {
                "url": "/AjaxDatatable",
                "dataSrc": "data",
                "type": "GET",
                "datatype": "json"
             },
             "columns": [
                 { "data": "CUSIP" },
                   ],
              "columnDefs": [{
                 "targets": 0,
                 "searchable": false,
                 "orderable": false
             }]

        });
    });

My table on page:

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>CUSIP</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>CUSIP</th>
        </tr>
    </tfoot>
</table>

The return Json string I see in Google Dev Console from XHR:

"{\"data\":[{\"CUSIP\":\"67505PA\"},{\"CUSIP\":\"9259YSR\"},{\"CUSIP\":\"3033LS5\"},{\"CUSIP\":\"07272S5\"},{\"CUSIP\":\"02845JG\"},{\"CUSIP\":\"93323SL\"},{\"CUSIP\":\"74829HS\"},{\"CUSIP\":\"37031VD\"},{\"CUSIP\":\"47253J\"},{\"CUSIP\":\"9447TMQ\"},{\"CUSIP\":\"4811BTB\"},{\"CUSIP\":\"9140M7Q\"}]}"

If I take that same Json string, remove exit characters and quotes and place it in a flat file and load from that the table works. That flat file looks like this:

{
    "data":
    [
        {"CUSIP":"67505PA"},
        {"CUSIP":"9259YSR"},
        {"CUSIP":"3033LS5"},
        {"CUSIP":"07272S5"},
        {"CUSIP":"02845JG"},
        {"CUSIP":"93323SL"},
        {"CUSIP":"74829HS"},
        {"CUSIP":"37031VD"},
        {"CUSIP":"47253JF"},
        {"CUSIP":"9447TMQ"},
        {"CUSIP":"4811BTB"},
        {"CUSIP":"9140M7Q"}
    ]
}

Any assistance in helping me figure out why my Json string is not working would be appreciated.

kthorngren

Looks like the JSON string is encapsulated at your server twice since the quotes are escaped, ie \". What is your server script doing with the data before its returned?

Kevin

colin

This thread may help,

Colin

chrisbo

Thanks for the response Kevin. I get my list of cusips and then do this in my C# code:

I have 2 classes in my Model to get my List in a format that will work:

public class BidWantedRollupCUSIPTest
    {
        public string CUSIP { get; set; }
    }

public class RootName_BidWantedRollupCUSIP
    {
        public IList<BidWantedRollupCUSIPTest> data { get; set; }
    }

Then I use the following to create my Json String in my Controller

RootName_BidWantedRollupCUSIP root_list_cusip = new RootName_BidWantedRollupCUSIP();
root_list_cusip.data = listRolledUpCUSIP;
string jsonStringCUSIP = JsonConvert.SerializeObject(root_list_cusip);

return Json(jsonStringCUSIP, JsonRequestBehavior.AllowGet);

kthorngren

I'm not familiar with the language you are using but I suspect the problem is you are converting the data to a JSON string with this statement:

jsonStringCUSIP = JsonConvert.SerializeObject(root_list_cusip);

Then again with this statement:

return Json(jsonStringCUSIP, JsonRequestBehavior.AllowGet);

But you will need to reference the commands documentation to knwo for sure.

Kevin

chrisbo

Kevin Thank You that is definitely what was happening. Appreciate the prompt response and help,