Is the JSON illustrated valid for DataTables

paparush

Can someone tell me if the JSON illustrated at this link is in a valid format for DataTables consumption?
newtonsoft.com/json/help/html/SerializingCollections.htm

allan

Its an array of objects, so yes, it looks fine to me. See the documentation.

Allan

paparush

Allan,
Thank you for your reply.

Is it problematic that the string I get back from my webMethod includes backslashes to escape the quotes? Like this:

{"d":[{\"SerialNbr\":\"CNB9R03766\",\"BarCode\":\"00005691\",\"SubcategoryText\":\"Laser\"}]}

Actually, I've figured out how to return without the backslashes, so now my JSON looks like:
{"d":[{"SerialNbr":"CNB9R03766","BarCode":"00005691","SubcategoryText":"Laser","CategoryText"}]}

Right now, after the Ajax call, I get the correct count
Showing 1 to 10 of 44 entries
But no data displayed in the table.

I'm using the Columns option. They are the correct number and named as shown above.

It feels like I need to unpack the data on the client side.

"dataSrc": function (json) {
return json.d;
}
If I set a breakpoint, and in the Immediate window i do ?json.d[0], I see the values for the first entry.

allan

You need to return JSON.parse( json.d ); since you need to parse the string. I've never understood why .NET makes it a string...

Allan

paparush

JSON.parse(json.d) results in an error: Unexpected token o in JSON at position 1

I have complete control over the web method and the call to the stored procedure, so I can return anything to the Ajax call; a string, a List<>, whatever. I just want to be able to bind to the datatable without having to parse the results on the client, build out the table rows with markup individually, and then bind. I have that approach working in another solution, but that seems like I'm missing the magic.

allan

That looks like it should work - I'd need a link to the page to be able to debug it and understand why it isn't working. A debugger trace might also be enough in this case.

Allan

paparush

Thanks again for the reply.

Unfortunately, this is an intranet app, all the data lives behind the firewall, etc.

Here's the client side code.

 <script type="text/javascript" charset="utf8">
         $(document).ready(function () {
           var  oTable = $('#tblData').dataTable({
               "ajax":{
                     "type": 'POST',
                     "url": "svc.asmx/GetRecords",
                     "dataType": 'json',
                     "contentType": "application/json; charset=utf-8",
                     "dataSrc": function (json) {
                        return json.d;
                        }
                     },
                 "columns":[{ "Data": "SerialNbr" },
                           { "Data": "BarCode" },
                           { "Data": "SubcategoryText" },
                           { "Data": "CategoryText" },
                           { "Data": "BrandText" },
                           { "Data": "ModelText" },
                           { "Data": "DispMethodText" },
                           { "Data": "Archived" },
                           { "Data": "InvArchiver" }]
                });
             });
        
    </script>

When I put a breakpoint in the Ajax call, and inspect json.d i see:
[...]
proto: []
length: 44
[0]: {...}
[1]: {...}
[2]: {...}
[3]: {...}
[4]: {...}
[5]: {...}
[6]: {...}
[7]: {...}
[8]: {...}
[9]: {...}

Then, in the debug window, if I look at json.d[0] I see:
{...}
proto: {...}
Archived: "06/16/2016"
BarCode: "00005691"
BrandText: "HP"
CategoryText: "Printers/Fax Machines"
DispMethodText: "Auction(GovDeals)"
InvArchiver: "SMITH, JOE"
ModelText: "LJ p2035n"
SerialNbr: "CNB9R03766"
SubcategoryText: "Laser"

This results in the correct record count showing in the table but all the fields in all the rows display NULL.

IF I change the code to:

"dataSrc": function (json) {
return jJSON.parse(son.d);
}
Then the data table shows 0 records and does not render any rows.

I appreciate your time and attention.

allan

Could you use the debugger so I can see a trace of what is happening please.

Allan

paparush

Allan,
The debug code is: ozajay

allan

Excellent - thanks!

The problem is with:

"Data":

in the columns array. It should be data (columns.data) since Javascript is case-sensitive.

Allan

paparush

Man, I was so hopeful that oversight was the problem. I'm still getting:

  _Requested unknown parameter '0' for row 0, column 0._

I feel like I've taken up too much of your time. i really appreciate your support.

allan

Can you give me a new debugger trace please.

Allan