Datatables.net uncaught typeerror: cannot read property 'length'

Question

0.00/5 (No votes)

See more:

I am using datatables.net plug in to load data in table.
I called web method in asp.net page and return 
JsonConvert.SerializeObject(result) 
as string; 
I could see below json string as response but I do not know how to bind them with datatables.net

{"d":"[{\"Apple\":507,\"Orange\":6,\"Mango\":75,\"Peach\":638,\"City\":\"SAN ANTONIO\",\"State\":\"TX\"},{\"Apple\":507,\"Orange\":6,\"Mango\":75,\"Peach\":638,\"City\":\"SAN ANTONIO\",\"State\":\"TX\"}]"}

What I have tried:

I tried to

JsonConvert.SerializeObject(new {data =result})

Posted 11-Feb-19 8:15am

istudent

Updated 12-Feb-19 3:34am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-02-12T03:34:00

DataTables expects the returned value to be an object with a property called data which contains the list of data to display:
ajax | Options | DataTables.net[^]

An ASP.NET WebMethod always wraps the returned object in an object with a property called d, to try to avoid a potential CSRF issue if the result is an array:
Anatomy of a Subtle JSON Vulnerability | You’ve Been Haacked[^]

You've also double-encoded the result - your web method should just return the data directly, rather than JSON-encoding it.

Once you've changed your web method to remove the extra JSON encoding, you can use the dataFilter option in your script to modify the returned data to match the expected format. For example:

JavaScript

"ajax": {
    ...
    dataFilter: function (res) {
        var parsed = JSON.parse(res);
        return { data: parsed.d };
    }
},