Unable to get Datatables to work with simple JSON data

Question

I'm pretty new to frontend and am trying to convert a JSON call to table format. I read that datatables is the way to go. But I am unable to get this working. Please help. This is my json get call.

GET /api/v1/get
{"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}

This is my html code from index.html. I'm powering this using flask.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />

  <title></title>
  <link rel="stylesheet" type="text/css" href=
  "https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css" />
  <link rel="stylesheet" type="text/css" href=
  "https://cdn.datatables.net/1.10.20/css/dataTables.material.min.css" />
  <link rel="stylesheet" type="text/css" href=
  "https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
</head>

<body>
  <table id="table4">
    <thead>
      <tr>
        <th>name</th>

        <th>position</th>

        <th>salary</th>

        <th>start_date</th>

        <th>office</th>

        <th>extn</th>
      </tr>
    </thead>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type=
  "text/javascript">
</script><script type="text/javascript" language="javascript" src=
"https://code.jquery.com/jquery-3.3.1.js">
</script><script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script><script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/dataTables.material.min.js">
</script><script type="text/javascript">
//<![CDATA[
  $(document).ready(function() {
  $('#table4').DataTable( {
  ajax: {
    url: '/api/v1/getec2',
    dataSrc: ''
  },
  columns: [
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" }
   ]
  } );
  } );
  //]]>
  </script>
</body>
</html>

Please let me know if I need to add anything else.

you mean the api is returning an array instead of an object? because if is just a single object it might be an overkill using jquery datatable — Mosd, Oct 27 '19 at 06:12
@Mosd My API is returning a json like mentioned above in the first block, not an array. This is just an example I'm trying to get it to work. My actual biggest objects might be about 3MB/4000 lines. — deppfx, Oct 27 '19 at 06:22
ok strange, cause with json response, you can usual expect that...but check my answer if is helpful — Mosd, Oct 27 '19 at 06:27

DarkCeptor44 · Answer 1 · 2019-10-27T06:08:08.190

0

You could just append everything manually and then call the DataTable() method alone, the code would be like this:

$(document).ready(function() {
    var json;
    $.get("/api/v1/getec2", function(data) { 
        json=JSON.parse(data);
    });

    $('#table4').append('<tbody><tr><td>'+json.name
        +'</td><td>'+json.position
        +'</td><td>'+json.salary
        +'</td><td>'+json.start_date
        +'</td><td>'+json.office
        +'</td><td>'+json.extn
        +'</td></tr></tbody>');

    $('#table4').DataTable();
});

Note that if the API is gonna return an array with multiple objects like that you would need to wrap the appending part in a for loop that iterates through the array, the code would be different, like this:

$(document).ready(function() {
    var json;
    $.get("/api/v1/getec2", function(data) { 
        json=JSON.parse(data);
    });

    var s='<tbody>';
    for(i in json){
        var obj=json[i];
        s+='<tr><td>'+obj.name
        +'</td><td>'+obj.position
        +'</td><td>'+obj.salary
        +'</td><td>'+obj.start_date
        +'</td><td>'+obj.office
        +'</td><td>'+obj.extn
        +'</td></tr>';
    }
    s+='</tbody>';

    $('#table4').append(s);
    $('#table4').DataTable();
});

edited Oct 27 '19 at 06:08

answered Oct 27 '19 at 05:53

DarkCeptor44

184
3
15

Thanks for trying to help, but both the solutions aren't working for me. It just shows a blank table. Also, can you please let me know what's wrong in my code? – deppfx Oct 27 '19 at 06:18
@deppfx well since my solution works for a JSON string I assume the problem with your code is the actual API request, I don't really know how to help you, are you sure that the API is actually working, as in sending the JSON? – DarkCeptor44 Oct 27 '19 at 16:17
I am using flask and doing `return jsonify(data)`. I guess that should be enough, right? – deppfx Oct 27 '19 at 19:04
if that's the case data should be a list? and response will be [{}], if is an object will be {}, and that is not something you want to display as a list... – Mosd Oct 28 '19 at 06:19

Mosd · Answer 2 · 2019-10-27T06:45:52.630

Assuming the data coming from an api is actually list of objects:

//some api call
function fetchData() {
  return Promise.resolve([
  {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"},
  {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"},
  {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}
  ])
}

//since not clear
//actual api call could have been something like
//function fetchData() {
// return fetch('/api/v1/get');
//}


fetchData().then(data => {


  $('#someTable').DataTable( {
        data: data,
        columns: [
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" }
   ]
    } );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type=
  "text/javascript">
</script><script type="text/javascript" language="javascript" src=
"https://code.jquery.com/jquery-3.3.1.js">
</script>
<script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script>


 
<table id="someTable" width="100%"></table>

if you later want to refresh, check out this post: How to reload/refresh jQuery dataTable?

references: https://datatables.net/examples/data_sources/js_array.html

Can you explain how to getch the JSON to a variable? i see you are passing the JSON data yourself in your example. — deppfx, Oct 27 '19 at 06:31
oh basically fetchData simulates some typical api call...they normally async calls, so if you using library that supports promises...like say fetch...it could have been return fetch('/api/v1/get'); — Mosd, Oct 27 '19 at 06:37
flashed the above on the answer as well...in case was still unclear...for your actual api call...can use the commented out function — Mosd, Oct 27 '19 at 06:41

Unable to get Datatables to work with simple JSON data

2 Answers2