Reading JSON with Ajax

blindfated

I'm trying to read a fairly simple JSON input file, using Ajax.

I can't figure out how to read the data into my table. I think I'm accessing the structure of the JSON incorrectly.

I've tried reading over this https://datatables.net/examples/ajax/objects.html and found this https://datatables.net/forums/discussion/comment/164173/#Comment_164173 to be pretty similar to the issue I'm having...

I'll get a live demo up as soon as I can.

Example file

#

{
"Data": [
{
"Date": "09/26/2022",
"KB": "KB2267602",
"Title": "Security Intelligence Update for Microsoft Defender Antivirus - KB2267602 (Version 1.375.1016.0)",
"Result": "Succeeded",
"ServerName": "Server1",
"LastBoot": "9/25/2022 1:00:44 AM",
"Uptime": "1 Days 15 Hours 6 Minutes"
},
{
"Date": "09/25/2022",
"KB": "KB2267602",
"Title": "Security Intelligence Update for Microsoft Defender Antivirus - KB2267602 (Version 1.375.950.0)",
"Result": "Succeeded",
"ServerName": "Server2",
"LastBoot": "9/25/2022 1:00:44 AM",
"Uptime": "1 Days 15 Hours 6 Minutes"
},
]
}

#

Here's how I'm init'ing

// DataTables init
var table = $("#data-table").DataTable({
ajax: "./data.json",
"columnDefs": [
{ "type": "date", "targets": [0,5] }
],

blindfated

Here is what I have. Not sure how to get a JSON file into the demo though.

http://live.datatables.net/vokoduyu/2/

Here is a sample of my JSON, just saved in the project as data.json ;

{
"Data": [
{
"Date": "09/26/2022",
"KB": "KB2267602",
"Title": "Security Intelligence Update for Microsoft Defender Antivirus - KB2267602 (Version 1.375.1016.0)",
"Result": "Succeeded",
"ServerName": "Server1",
"LastBoot": "9/25/2022 1:00:44 AM",
"Uptime": "1 Days 15 Hours 6 Minutes"
},
{
"Date": "09/25/2022",
"KB": "KB2267602",
"Title": "Security Intelligence Update for Microsoft Defender Antivirus - KB2267602 (Version 1.375.950.0)",
"Result": "Succeeded",
"ServerName": "Server2",
"LastBoot": "9/25/2022 1:00:44 AM",
"Uptime": "1 Days 15 Hours 6 Minutes"
},
]
}

kthorngren

Looks like you need to add columns.data to define which row objects you want to display and in which column. Go to the example you linked to. Compare the columns.data option to the JSON found in the Ajax tab.

Kevin

blindfated

@kthorngren

I did play around with that earlier by adding;

var table = $("#data-table").DataTable({
ajax: "./data.json",
columns: [
{ data: 'Date' },
{ data: 'KB' },
{ data: 'Title' },
{ data: 'Result' },
{ data: 'ServerName' },
{ data: 'LastBoot' },
{ data: 'Uptime'},
],

But I had no luck. Am I referencing the column name itself by doing this or pull out each object from the JSON and assigning it a column?

blindfated

I keep thinking I need something like...

 { data.Date: 'Date Installed or Available' } to stash it into the column.

kthorngren

Just noticed this. Your row data is in an object named Data. By default Datatables is looking for the ro data to be in data. Javascript is case sensitive. Either change from Data to data in your server script or use ajax.dataSrc to point to Data. See the Ajax docs for more details.

Kevin

blindfated

This works perfectly. Is it best practice to use the URL pointer for local files?

var table = $("#data-table").DataTable({
ajax:{"url":"./data.json",
"dataSrc": "Data"},
columns: [
{ data: 'Date' },
{ data: 'KB' },
{ data: 'Title' },
{ data: 'Result' },
{ data: 'ServerName' },
{ data: 'LastBoot' },
{ data: 'Uptime'},
],

I've updated my demo;

live.datatables.net/vokoduyu/3/edit

Thank you. This was extremely helpful. Now on to adding buttons for export to csv and such.

kthorngren

Is it best practice to use the URL pointer for local files?

No. Web browsers, for security reasons, won't allow ajax request to the local file system. To access the file, even locally, you must go through a web server.

Kevin