Cannot read from text file

ShirleyW

Hello,

Would someone help with this.....I am all tangled up . I tried every possible combinations, read threads, and to no avail....

I have in my javascript file the following code:

$(document).ready(function() {
$('#datatablePurchases').DataTable({
"data": "C:\temp\Purchases.json",
"columnDefs": [
{"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
{"data": "category"},
{"data": "vendor"},
{"data": "item"},
{"data": "sku"},
{"data": "qty"},
{"data": "uom"},
{"data": "delivery"},
{"data": "status"},
{"data": "comments"}
],
"order": [[1, 'asc']]
});
}

The .html looks like this:

	Category	Vendor	Item	SKU	Qty	UOM	Delivery	Status	Comments

The file in c:\temp\Purchases.json looks like this:

{
"data":[
{
"category": "AV",
"vendor": "Barco",
"item": "ClickShare CSR-200",
"sku": "1147-789546548A",
"qty": "10",
"uom": "each",
"delivery": "02/25/2018",
"status": "on order",
"comments": "To be installed to conference rooms 101, 102, 103, 104 and to booth 201-206"
},
{
"category": "AV",
"vendor": "Barco",
"item": "ClickShare CSR-300",
"sku": "1147-789546548A",
"qty": "10",
"uom": "UOM",
"delivery": "02/25/2018",
"status": "on order",
"comments": "To be installed to conference rooms 401, 402, 403, 404"
}
]
}

The error said

DataTables warning: table id=datatablePurchases
Requested unknown parameter 'category' for row 0, column 1.

Please help. Thanks,

Shirley

allan

The browser won't allow you to load a local file using Ajax (e.g. C:\...). Doing so would be a massive security issue since any Javascript could then read any file on your computer and send it to any server, including your passwords files, etc!

If you want to load a file via Ajax you need to do it with an http server to load the file.

Allan

ShirleyW

Thank you Allan,

I started with the code below but it did not work so I used the file from C:\temp\ just to display the .html page without going through iis and it gave me the same error
Any more ideas?

This is the original code:

$('#datatableSSRPurchases').DataTable({
"data": "../../production/TestData/Purchases.json",
"columnDefs": [
{"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
{"data": "category"},
{"data": "vendor"},
{"data": "item"},
{"data": "sku"},
{"data": "qty"},
{"data": "uom"},
{"data": "delivery"},
{"data": "status"},
{"data": "comments"}
],
"order": [[1, 'asc']]
});

I also put Purchases.json in the same directory where the .html page is and adjusted the relative path accordingly, with the same result.

kthorngren

You will need to load your data using the ajax option instead of data.

For example:
"ajax": "../../production/TestData/Purchases.json",
Kevin

ShirleyW

Thank you Kevin,

I have tried all the combinations I could think of, "ajax" or "data", columns or columnsDef. Would you look at the attachment and see what I missed / overlooked?

Thanks again.

Shirley

kthorngren

I'm guessing what you want is this:

$('#datatableSSRPurchases').DataTable({
"ajax": "../../production/TestData/Purchases.json",
"columns": [
{"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
{"data": "category"},
{"data": "vendor"},
{"data": "item"},
{"data": "sku"},
{"data": "qty"},
{"data": "uom"},
{"data": "delivery"},
{"data": "status"},
{"data": "comments"}
],
"order": [[1, 'asc']]
});

Note: Changed columnDefs to columns and using ajax. Looks like the columns definition should match with your JSON.

If this doesn't work then you should get an alert message with a link to a technote. Please try the steps in the technote and if you need further help post the error message you are getting and the results of your investigation.

Kevin

ShirleyW

Hi Kevin,

I tried the suggested combination and it just shows "Loading..." with no data but when I reverted it back to options "data" + "columns", it tells me it does not like my .json as it cannot find the 1st column category, though the 1st column is really the icon to expand/collapse.

Thanks again

tangerine

the 1st column is really the icon to expand/collapse.

Does your HTML have that column?

ShirleyW

Yes it does

	Category	Vendor	Item	SKU	Qty	UOM	Delivery	Status	Comments
	Category	Vendor	Item	SKU	Qty	UOM	Delivery	Status	Comments

tangerine

That doesn't tally with your DataTables columns.

{"className": 'details-control', "orderable":false, "data":null, "defaultContent":''},
{"data": "category"},
{"data": "vendor"},
...

ShirleyW

It must be obvious but I still do not understand (sorry)
Please see attachment....Thanks so much for not giving up

kthorngren

I tried the suggested combination and it just shows "Loading...

When you try using the ajax option do you see any errors in your browser's console?

We need to find out what the server is returning. Maybe the steps in this tech note will help:
https://datatables.net/manual/tech-notes/1

Kevin

tangerine

Oh, right. So your HTML does have an empty th preceding the Category column. But it isn't shown when you post like this:

CategoryVendorItemSKUQtyUOMDeliveryStatusComments

Stick with Kevin, he knows what he's doing.

ShirleyW

Gentlemen,

Thanks so much for your patience. I followed the suggested tech-notes steps and saw the error 404 Not Found no matter how I updated the ajax path and syntax. I then realized the browser is holding onto the cached location of the .json file. So I cleared the browser cache, recycled IIS and the data showed up correctly, all good.

Shirley