Is the JSON illustrated valid for DataTables

Is the JSON illustrated valid for DataTables

paparushpaparush Posts: 10Questions: 2Answers: 0

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

Answers

  • allanallan Posts: 52,157Questions: 1Answers: 7,936 Site admin

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

    Allan

  • paparushpaparush Posts: 10Questions: 2Answers: 0
    edited June 2016

    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.

  • allanallan Posts: 52,157Questions: 1Answers: 7,936 Site admin

    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

  • paparushpaparush Posts: 10Questions: 2Answers: 0

    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.

  • allanallan Posts: 52,157Questions: 1Answers: 7,936 Site admin

    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

  • paparushpaparush Posts: 10Questions: 2Answers: 0
    edited June 2016

    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.

  • allanallan Posts: 52,157Questions: 1Answers: 7,936 Site admin

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

    Allan

  • paparushpaparush Posts: 10Questions: 2Answers: 0

    Allan,
    The debug code is: ozajay

  • allanallan Posts: 52,157Questions: 1Answers: 7,936 Site admin

    Excellent - thanks!

    The problem is with:

    "Data":
    

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

    Allan

  • paparushpaparush Posts: 10Questions: 2Answers: 0

    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.

  • allanallan Posts: 52,157Questions: 1Answers: 7,936 Site admin

    Can you give me a new debugger trace please.

    Allan

This discussion has been closed.