Loading Datatables from a json file

Barbarosa

I am having problems getting my tables to populate by pointing to a json file. The file is an array of JSON objects, each object representing a file in a folder. It looks like this:
[
{"name":"AuraRulesRepoAgeCoverageProject_Export_Compare_report.html","date":"2019-01-29T20:33:57.00163Z","size":348},
{"name":"AuraRulesRepoAgeCoverageProject_Export_Compare_report.xml","date":"2019-01-29T20:33:57.000167Z","size":401},
{"name":"AuraRulesRepoAgeCoverageProject_promotion.html","date":"2019-01-29T20:33:57.000171Z","size":1314},
{"name":"AuraRulesRepoAgeCoverageProject_promotion.xml","date":"2019-01-29T20:33:57.000175Z","size":852},
{"name":"AuraRulesRepoAgeCoverageTestingProject_Export_Compare_report.html","date":"2019-01-29T20:33:57.000179Z","size":183},
{"name":"AuraRulesRepoAgeCoverageTestingProject_Export_Compare_report.xml","date":"2019-01-29T20:33:57.000183Z","size":123},
]

Barbarosa

well, did not mean for that to post yet, was still typing... I have tried several variations of implanting the ajax examples but none are working for me. Is the location of the file relative to the html file I am running? Is the structure of my JSON file wrong? Once I get this working I want the next step to write a servlet that returns the json in the right format to populate the table. If someone could show me a snippet of how to do that I would really appreciate it.

kthorngren

Maybe you can post your Datatables init code and how you are adding the JSON data. If using ajax then you will need to use ajax.dataSrc to point Datatables to where the data is. By default it wants the data in a data object.

If using rows.add() the structure should be good if your Datatables config is correct.

Kevin

kthorngren

Also provide any alert errors you get and any errors in the browser's console.

Kevin

Barbarosa

No messages of any kind in the browser console. I test my servlet and it is now returning this format:

{
   "data": [ 
      [
          "name": "file1.html",
          "date": "2019-01-29T20:33:57.000163Z",
          "size": "348"
      ]
      [
          "name": "file2.xml",
          "date": "2019-01-29T20:33:57.000167Z",
          "size": "401"
      ]
      [
          "name": "file3.html",
          "date": "2019-01-29T20:33:57.000171Z",
          "size": "1314"
      ]

I call my servlet in the html file like this:

        var listFilesUrl = "http://localhost:8080/ListFilesServlet/files?folder=/temp/promotionReports";
        $(document).ready(function() {
            var table = $('#example').DataTable({
                "ajax": {
                    "url": listFilesUrl
                }
            });

but the window remains empty. What do I need in the body section for this style of table loading? The examples are not very clear and link in files with relative locations so I can't see them. Do I need a div section for the example table? If so, what does it look like? I want the ajax call to set up the table based upon what it finds in the data returned by the call to the servlet. I can get the list of files if I enter the value of listFilesUrl in my browser. I get the blank window also when I try to point the ajax url arg to a text file containing the response from the Servlet. Do I need a completely empty body section of the html file?

colin

Hi @Barbarosa ,

You'll need to tell DataTables where the data is for each column, see example here.

Cheers,

Colin

Barbarosa

Thanks for the tip Colin...

I now call it like this:

$(document).ready(function() {
var table = $('#example').DataTable({
"ajax": {
"url": "smallFile.txt"
"columns": [
{ "data": "name" },
{ "data": "date" },
{ "data": "size" }
]
}
});

The file "smallFile.txt" resides in the same folder as my html file and looks like this:

{
"data": [
{ "name:", "file1.html" }
{ "date:", "2019-01-29T20:33:57.00163Z" }
{ "size:", "348" }
]
[
{ "name:", "file2.xml" }
{ "date:", "2019-01-29T20:33:57.000167Z" }
{ "size:", "401" }
]
[
{ "name:", "file3.html" }
{ "date:", "2019-01-29T20:33:57.000171Z" }
{ "size:", "1314" }
]

}

But still the window is blank and nothing appears in the browser console when I open the html file. my head section looks like this:

<head>
    <script  src="https://code.jquery.com/jquery-3.4.0.js"  integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="  crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <style type="text/css" class="init"></style>    
</head>

I cannot figure out where this is going astray. I keep trying slightly different text file formats but have had no luck.

kthorngren

There are two problems. The first is that you have the columns option inside the ajax option.

"ajax": {
  "url": "smallFile.txt"
  "columns": [
  { "data": "name" },
  { "data": "date" },
  { "data": "size" }
  ]
}

You need to move it outside the ajax option, like this:

"ajax": {
  "url": "smallFile.txt"
  },
  "columns": [
  { "data": "name" },
  { "data": "date" },
  { "data": "size" }
  ]

The second problem is that ajax expects to communicate with an http server. It won't pull a text file from the local host machine. You will need to serve the file from a webserver.

Kevin

Barbarosa

I noticed that my colon symbols were inside double quotes. I fixed that so that the file now looks like this

but the result is the same blank window...

Barbarosa

according to the live examples you can read from a text file..

https://datatables.net/examples/ajax/simple.html

This is from the source of the example:

$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/arrays.txt"
} );
} );

Is the format of my text file OK? If so, I will revise my servlet to create it that way and try pointing it to the servlet url

kthorngren

Your JSON should look like this:

{
    "data": [{
            "name": "file1.html",
            "date": "2019-01-29T20:33:57.00163Z",
            "size": "348"
        },
        {
            "name": "file2.xml",
            "date": "2019-01-29T20:33:57.000167Z",
            "size": "401"
        },
        {
            "name": "file3.html",
            "date": "2019-01-29T20:33:57.000171Z",
            "size": "1314"
        }
    ]

}

You can use https://jsonlint.com/ to validate your JSON format. Note that even though the JSON format is valid it doesn't always mean that it is structured in a way that Datatables supports.

Kevin

Barbarosa

Kevin,

Thanks! JSONLint says the response from my servlet is valid JSON. Now it looks like your example. I am now calling the servlet URL in my html but the window is still blank. I am thinking the problem must be in my header or body section but I don't know what is missing or is there causing the problem.

Tim

kthorngren

Try following the steps in this tech note to see what the response form your server is:
https://datatables.net/manual/tech-notes/1

Kevin

Barbarosa

Kevin,

I followed the steps in the link and saw this in the network tab of chrome developer tools:

Still the browser remains an empty screen.

Barbarosa

When I run the same call to the servlet in the browser that my html is calling, I see:

kthorngren

according to the live examples you can read from a text file..

I said that you can't directly read from a file on the local system. I only mentioned it because I wasn't sure if that was what you were trying to do.

I am thinking the problem must be in my header or body section but I don't know what is missing or is there causing the problem.

Doesn't look like there is an XHR request in the developer tools. It could be that the table header columns doesn't match the number you have defined in columns.data. Do you have three columns in your table?

You don't need a tbody as Datatable will build that for you. Its hard to say as you haven't posted what your table looks like.

Kevin

Barbarosa

I don't have a table tag at all. What should the table tag look like if you want the table to be dynamically built by parsing response from the ajax call? Teh data being returned by the call to the servlet url is in this format:

I have tried it with and without the columns tag, same result.

kthorngren

Start with this example:
https://datatables.net/examples/ajax/objects.html

Click on the HTML tab to see what the table should look like. Click on the ajax tab to see what the response looks like.

Kevin

Barbarosa

Kevin,

This worked! Thanks! With a table tag that includes a thead tag I can load teh table with data returned by my servlet. This is a big step forward. However, now that th edata is being loaded from objects rather than from data in the html table rows, when I click on a row and try to access the row data like this:

            jQuery('#fileList tbody').on( 'mousedown', 'tr', function (e) {
                var data = table.row( this ).data();
                alert( 'File selected = ' + data[0]);

I get this:

How do I drill down on the row data to extract the cell values when data is loaded in this manner? When the table data is defined in the html file in the table tag, this style of access works for exposing the cell data.

Tim

kthorngren

You would use data.name instead of data[0]. Please see this tutorial for more info, if you are not familiar with access object properties.
https://www.w3schools.com/js/js_object_properties.asp

Kevin

Barbarosa

Thank you. Yes, this is much more elegant. I will refer to the manual. I do have one remaining problem. Data loads immediately when I open the html file in IE, but in all other browsers I get this:

Any advice?

kthorngren

Look at the browser's console for errors.

Follow the request/response using the browser's developer tools.

Kevin

Barbarosa

Kevin,

I was able to solve this problem by adding this to my servlet that is providing the data for populating the table:

        /***** Set Response Header *****/
        response.setHeader("Access-Control-Allow-Origin", "*");

Thank you for all your help!

Tim