CODEWITHSUNDEEP
jqueryajaxdatatables
Rami
Rami

Reputation: 171

Datatables not displaying the response

I am trying to get data from an api using AJAX Datatables, the data is retrieved successfully and is being displayed in the network tab but it is not rendered in the DataTable

Here is my AJAX Call

"ajax": {
            "url": "https://api.tidex.com/api/3/info",
            "type":'POST',
            "dataSrc": "pairs",
    },
    columns: [
         { data: 'pairs' },
         { data: 'server_time' },
         { data: 'server_time' },
         { data: 'server_time' },
         { data: 'server_time' },
         { data: 'server_time' },
    ],
    columnDefs: [
       {
           "render": function (data, type, row) {
                return '<a href="">'+data+'</a>';

           }, "targets": 6
       },
    ]

I tried rendering it in the normal way but I failed, then I tried rendering it using columnDefs but that also failed.

Upvotes: 2

Views: 1199

Answers (2)

davidkonrad
davidkonrad

Reputation: 85588

The API response is an object collection or dictionary, which is not parseable for DataTables. It makes sense since you would expect table data to be ordered by indexes, not by names such as "doge_btc".

So you must transform the response to an array of objects. Fortunately this is rather easy, you can do that in the dataSrc callback :

var table = $('#example').DataTable({
   ajax: {
     url: "https://api.tidex.com/api/3/info",
     dataSrc: function(d) {
      var data = [];
      for (var item in d.pairs) {
         data.push(d.pairs[item])
      }
      return data
     }
   },
   columns: [
    { data: "decimal_places", title: "decimal_places" },
    { data: "min_price", title: "min_price" },
    { data: "max_price", title: "max_price" },
    { data: "min_amount", title: "min_amount" },
    { data: "max_amount", title: "max_amount" },
    { data: "min_total", title: "min_total" },
    { data: "hidden", title: "hidden" },
    { data: "fee", title: "fee" }
   ]
})

Thats it -> http://jsfiddle.net/wnoemmte/

Upvotes: 3

K Thorngren
K Thorngren

Reputation: 548

You JSON looks like this:

{
    "server_time": 1518103107,
    "pairs": {
        "ltc_btc": {
            "decimal_places": 8,
            "min_price": 0.00000001,
            "max_price": 3.0,
            "min_amount": 0.001,
            "max_amount": 1000000.0,
            "min_total": 0.0001,
            "hidden": 0,
            "fee": 0.1
        },
        "eth_btc": {
            "decimal_places": 8,
            "min_price": 0.00000001,
            "max_price": 3.0,
            "min_amount": 0.001,
            "max_amount": 1000000.0,
            "min_total": 0.0001,
            "hidden": 0,
            "fee": 0.1
        },
        .......
        "bins_eth": {
            "decimal_places": 8,
            "min_price": 0.0000001,
            "max_price": 20.0,
            "min_amount": 0.001,
            "max_amount": 1000000.0,
            "min_total": 0.001,
            "hidden": 0,
            "fee": 0.1
        }
    }
}

While that is a valid JSON format its not a valid Datatables format. Please see the Datatables Data docs for more details.

First it expects an array of objects and that each row of objects are consistent. You have this:

"pairs": {
        "ltc_btc": {

Then this:

        "eth_btc": {

As far as I know this won't work with Datatables. Is "ltc_btc" a name or something? A structure like this will be better for Datatables:

{
    "server_time": 1518103107,
    "pairs": [
        {
            "name": "ltc_btc",
            "decimal_places": 8,
            "min_price": 0.00000001,
            "max_price": 3.0,
            "min_amount": 0.001,
            "max_amount": 1000000.0,
            "min_total": 0.0001,
            "hidden": 0,
            "fee": 0.1
        },
            "name": "eth_btc",
            "decimal_places": 8,
            "min_price": 0.00000001,
            "max_price": 3.0,
            "min_amount": 0.001,
            "max_amount": 1000000.0,
            "min_total": 0.0001,
            "hidden": 0,
            "fee": 0.1
        },
        .......
            "name": "bins_eth",
            "decimal_places": 8,
            "min_price": 0.0000001,
            "max_price": 20.0,
            "min_amount": 0.001,
            "max_amount": 1000000.0,
            "min_total": 0.001,
            "hidden": 0,
            "fee": 0.1
        }
    ]
}

An array of objects. Then you can define your columns like this:

columns: [
     { data: 'name' },
     { data: 'min_price' },
     { data: 'max_price' },
     { data: 'min_amount' },
     { data: 'max_amount' },
     { data: 'hidden' },
],

Or whatever data columns you want to display.

Upvotes: 0

Related Questions