How to Insert JSON data into DataTable

Question

I am new to Javascript and I am trying to dynamically load Json data into datatable on a button click.

My Json data is in below format

     [{"DeviceName":"AND1","IPAddress":"10.10.12.1221"},   {"DeviceName":"AND2","IPAddress":"10.10.12.1222"},{"DeviceName":"AND3","IPAddress":"10.10.12.1223"}]

Here is my complete Html code: When I am running this code, I am getting an UncaughtType error in processDeviceDataResults at ('#deviceTable'). But, I am pretty sure this is not the way you to load data in to the datatable.

   

                      
            //Set the hubs URL for the connection
            var url = 'http://localhost:8080/signalr';

            var connection = $.hubConnection(url);

            // Declare a proxy to reference the hub.
            var hubProxy = connection.createHubProxy('HubClass');

            hubProxy.on('DeviceDataResults', processDeviceDataResults);

            connection.start().done(function() {
                $("#GetDeviceData").click(function() {
                    hubProxy.invoke('GetDeviceData');
                });
            });

            function processDeviceDataResults(results) {                 
                $('#deviceTable').dataTable({
                    "aodata": results
                });
        }
        
       
      
 

Answer 1

Try this

data.json

    {
    "data": [
        {
            "DeviceName": "AND1",
            "IPAddress": "10.10.12.1221"
        },
        {
            "DeviceName": "AND2",
            "IPAddress": "10.10.12.1222"
        },
        {
            "DeviceName": "AND3",
            "IPAddress": "10.10.12.1223"
        }
    ]
}

js

  $('#deviceTable').dataTable({
      "ajax": "data.json",
      "columns": [
        { "data": "DeviceName" },
        { "data": "IPAddress" }
    ]
  });

example here http://www.wishesafterlive.com/stackoverflow/dataTableJson.php

Answer 2

Jifho, Thanks for your response. I formatted my JSON data as you suggested and I am getting an "Uncaught TypeError: Undefined is not a function on $('#deviceTable').dataTable line. I have a table defined in my html body as

       $(document).ready(function () {

             var url = 'http://localhost:8080/signalr';

             var connection = $.hubConnection(url);

             // Declare a proxy to reference the hub.
             var hubProxy = connection.createHubProxy('HubClass');

             hubProxy.on('DeviceDataResults',   processDeviceDataResults);

             connection.start().done(function () {
                 $("#GetDeviceData").click(function () {


                     hubProxy.invoke('GetDeviceData');
                 });


             });

             function processDeviceDataResults(results) {

                 $('#deviceTable').dataTable({
                     "ajax": results,
                     "columns": [
                         { "data": "DeviceName" },
                         { "data": "IPAddress" }
                     ]
                 });
             }
         });
       

my JSON results:

     {"data":[{"DeviceName":"AND1","IPAddress":"10.10.12.1221"},{"DeviceName":"AND2","IPAddress":"10.10.12.1222"},{"DeviceName":"AND3","IPAddress":"10.10.12.1223"}]}