How to populate data table in Jquery loop

Question

I have a data table and response is coming from the API. Now I want to display that information in that data table. The response is as below

[
    {
        "server_id": "123.123.12.12",
        "domain": null,
        "count_date": "2018-03-02",
        "bounce_count": "281494",
        "deliver_count": "558350"
    },
    {
        "server_id": "123.123.12.12",
        "domain": null,
        "count_date": "2018-03-03",
        "bounce_count": "1",
        "deliver_count": "0"
    },
    {
        "server_id": "123.123.12.12",
        "domain": "test.com",
        "count_date": "2018-03-05",
        "bounce_count": "444",
        "deliver_count": "194747"
    },
]

I want to populate the above information in a data table so that keys of that json are table headers and values in rows below

Is every JSON entry going to contain the same key value pairs? — Ryan Wilson
– Ryan Wilson, Commented Mar 5, 2018 at 18:23

G_S · Accepted Answer · 2018-03-05 18:37:34Z

2

You can use below code to display the Jquery datatables based on your Ajax result.

Assuming that you made an Ajax call and you have your data in result variable (here i have given it as a constant)

$(document).ready(function() {
  var result = [
    {
        "server_id": "123.123.12.12",
        "domain": null,
        "count_date": "2018-03-02",
        "bounce_count": "281494",
        "deliver_count": "558350"
    },
    {
        "server_id": "123.123.12.12",
        "domain": null,
        "count_date": "2018-03-03",
        "bounce_count": "1",
        "deliver_count": "0"
    },
    {
        "server_id": "123.123.12.12",
        "domain": "test.com",
        "count_date": "2018-03-05",
        "bounce_count": "444",
        "deliver_count": "194747"
    },
]
  LoadCurrentData(result)
    
} );

function LoadCurrentData(result) {
    var example = $("#example")
 // "server_id": "123.123.12.12",
   //     "domain": "test.com",
     //   "count_date": "2018-03-05",
       // "bounce_count": "444",
      //  "deliver_count": "194747"
    example.DataTable ({ 
        "data" : result,
        "columns" : [
            { "data" : "server_id"},
            { "data" : "domain" },
            { "data" : "count_date" },
            { "data" : "bounce_count" },
            { "data" : "deliver_count" }
        ]
    });
}

<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
            <tr>
                <th>Server_id</th>
                <th>domain</th>
                <th>count_date</th> 
                <th>bounce_count</th>
                <th>deliver_count</th>
            </tr>
        </thead>
</table>

Let me know if this is what you are looking for

answered Mar 5, 2018 at 18:37

G_S

7,1302 gold badges27 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

baig772 Over a year ago

I am seeing this error DataTables warning: table id=example - Requested unknown parameter 'server_id' for row 0, column 0. For more information about this error, please see datatables.net/tn/4

G_S Over a year ago

in that case, please post your code so that we can check what's going different with your code.

annoyingmouse · Accepted Answer · 2018-03-07 11:04:00Z

If you don't know the "shape" of your data you can do something like this:

var data = [{
        "server_id": "123.123.12.12",
        "domain": null,
        "count_date": "2018-03-02",
        "bounce_count": "281494",
        "deliver_count": "558350"
    },
    {
        "server_id": "123.123.12.12",
        "domain": null,
        "count_date": "2018-03-03",
        "bounce_count": "1",
        "deliver_count": "0"
    },
    {
        "server_id": "123.123.12.12",
        "domain": "test.com",
        "count_date": "2018-03-05",
        "bounce_count": "444",
        "deliver_count": "194747"
    }
];

var example = null;
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/echo/json/',
    data: {
        json: JSON.stringify(data)
    },
    success: function(result) {
        var arr = [],
            cols = [];
        result.reduce(function(pre, item) {
            Object.keys(item).forEach(function(i) {
                if (arr.indexOf(i) === -1) {
                    arr.push(i);
                    cols.push({
                        "data": i,
                        "title": i,
                        "default": ""
                    });
                }
            });
        });
        if ($.fn.DataTable.isDataTable("#example")) {
            example.destroy();
            $('#example').empty();
        }
        example = $("#example").DataTable({
            "responsive": true,
            "columns": cols,
            "data": result,
            "autoWidth": false
        });
    }
});

Working JSFiddle here. There are probably more elegant ways of generating the columns array...

And your ajax call will likely be different as this is using the mocked ajax mechanism of JSFiddle.

Collectives™ on Stack Overflow

How to populate data table in Jquery loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related