Get Data from JSON file into jQuery Datatables

Question

I am trying to adding add data from a JSON file that I generated from Django script.

This is the format of JSON file:

[
{
    "6": "yo1",
    "1": "2019-04-04",
    "4": "yo1",
    "3": "yo1",
    "2": "yo1",
    "5": "yo1"
},
{
    "6": "yo2",
    "1": "2019-04-08",
    "4": "yo2",
    "3": "yo2",
    "2": "yo2",
    "5": "yo2"
}
] 

JavaScript:

let url = `/api/?site=${filters.site_filter}&sd=${filters.sd}&ed=${filters.ed}&report_type=yo`;

 $.getJSON(url, function(data) {data.forEach(d => {
        console.log(data);
        $('#video_data').DataTable( {
            "ajax": allData
            columns: [
            { title: "1" },
            { title: "2" },
            { title: "3" },
            { title: "4" },
            { title: "5" },
            { title: "6" }
            ]
        } );
    })
})

HTML Code:

<table border="1" id="video_data">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Site</th>
                    <th>Page Type</th>
                    <th>Device Type</th>
                    <th>Video Player Name</th>
                    <th>AB Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>

The result of this only gives me a Loading message and also I am getting this error every time I load the page: DataTables warning: table id=video_data - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 DataTables warning: table id=video_data - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I am not sure what I a, doing wrong?

Answer 1

I see a couple things that look wrong with this.

The first parameter of .getJSON should be the path to the json file. From the looks of it, allData does not seem to be a path.

Also, you are looping through each item from the getJson response and initializing your data table again and again.

Lastly, to initialize the table with a dataset, use the property data and not ajax . Should look something like this:

var url = 'path/to/json/file.json';
$.getJSON(url, function(data) {
  $('#video_data').DataTable({
    data: data
  });
})