How do I get DataTable data to load my JSON without the AJAX call?-CodePudding

I am working with DataTables, trying to load my json data. The HTML renders fine but I can't get any data to display. The live data wasn't working so I created a string to simulate the return. I'm not making an Ajax call to get the data, I'm calling the endpoint in c# and passing the resulting json string to JS. I'm getting no errors in the console. If you are curious why I'm not using Ajax, I'll say I don't know. :-)

We just downloaded DataTables so it is the latest version and the project is .Net Framework 4.6.1

Here is my Json:

    var fakeJson =
         {
             "data":
             {
                 "Triggers": {
                     "TriggerTypeId": 2,
                     "TriggeredKeyId1": 499,
                     "TriggerHelpText": "Blah blah blah",
                     "TriggerActionDefinitionID": 2,
                     "ComparisonOperatorID": 1
                 },
                 "Action": {
                     "TaDescription":"this is an action description"
                 },
                 "Protocols": {
                     "protocolDescription": "this is a protocol description"
                 },
                 "Operators": {
                     "CODisplayText": "="
                 }
             }
         };

and here is my JS:

         var dataSource = <%= DataTableJson %>;
         dataString = JSON.stringify(dataSource);
         dataSource = JSON.parse(dataString);

         console.log(fakeJson.data.Triggers.TriggerHelpText);

        var editor = new $.fn.dataTable.Editor({
            table: '#ProtocolTriggerTable',
            "data": fakeJson
            },

            fields: [{
                label: "Comparison",
                name: "data.Operators.CODisplayText",
                //type: "select"
             }, {
                label: "Action",
                name: "data.Action.TaDescription",
                //type: "select"
            }, {
                label: "Item",
                name: "data.Protocols.protocolDescription",
                //type: "select"
            }, {
                label: "Pop-up Text",
                    name: "data.Triggers.TriggerHelpText",
                //type: "select"
            }]
        });

         $('#ProtocolTriggerTable').DataTable({
             dom: "rt",
             data: fakeJson,
             columns: [
                 { data: "data.Operators.CODisplayText" },
                 { data: "data.Action.TaDescription" },
                 { data: "data.Protocols.protocolDescription" },
                 { data: "data.Triggers.TriggerHelpText" }
             ],

         });

and the HTML

<table border="1" id="ProtocolTriggerTable"  style="background-color: #e0e0e0; width:100%;">
    <thead>
        <tr>
            <th style="width:20px !important"></th> 
            <th>Comparison</th>
            <th>Action</th>
            <th>Item</th>
            <th>Pop-up Text</th>
        </tr>
    </thead>
</table>

Follow-up: Based on two or three good comments below, here is the Json structure that finally worked. No I just have to apply this to my live data.


        var fakeJson =
            [{
                "Triggers": {
                    "TriggerTypeId": 2,
                    "TriggeredKeyId1": 499,
                    "TriggerHelpText": "Blah blah blah",
                    "TriggerActionDefinitionID": 2,
                    "ComparisonOperatorID": 1
                },
                "Action": {
                    "TaDescription": "this is an action description"
                },
                "Protocols": {
                    "protocolDescription": "this is a protocol description"
                },
                "Operators": {
                    "CODisplayText": "="
                }
            }];

CodePudding user response：

The format of the DataTableJson is not usable try something like this:

[
    ['Comparison0', 'Action0', 'Item0', 'Popup0'],
    ['Comparison1', 'Action1', 'Item1', 'Popup1'],
]